thymeleaf模板的標籤使用&bootstrap

一、thymeleaf模板配置

#thymeleaf基礎配置

#開發時關閉緩存,不然沒法看到實時頁面
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML5
#前綴
spring.thymeleaf.prefix=classpath:/templates/
#編碼
spring.thymeleaf.encoding=UTF-8
#類型
spring.thymeleaf.servlet.content-type=text/html
#名稱的後綴
spring.thymeleaf.suffix=.html

二、標籤的應用

1. th:text

   <span th:text="${nowTime}"></span>
   

2. th:value和th:selected

   <select>
   	<option 
   		th:value="${text}" 
   		th:selected="${city.city_code eq cityId}">
   	</option>
   </select>
   

3. th:each
   循環遍歷集合

   <div th:each="info : ${list}">
   	<span th:text="${info.text}"></span>
   </div>
   

4. th:if

    gt：great than（大於）>
    ge：great equal（大於等於）>=
    eq：equal（等於）==
    lt：less than（小於）<
    le：less equal（小於等於）<=
    ne：not equal（不等於）!=
   

   做判斷，如果等於1，則顯示“你好”

   <div th:if="${info} eq '1'">
   	<span>你好</span>
   </div>
   

三、bootstrap的樣式地址和css地址

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no">

<link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
          
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
<script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"
        integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh"
        crossorigin="anonymous"></script>
<script
        src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"
        integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ"
        crossorigin="anonymous"></script>