這篇文章主要介紹“spring boot+thymeleaf+bootstrap怎么編寫后臺管理系統(tǒng)界面”，在日常操作中，相信很多人在spring boot+thymeleaf+bootstrap怎么編寫后臺管理系統(tǒng)界面問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”spring boot+thymeleaf+bootstrap怎么編寫后臺管理系統(tǒng)界面”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

站在用戶的角度思考問題，與客戶深入溝通，找到杏花嶺網(wǎng)站設計與杏花嶺網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：網(wǎng)站制作、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、國際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務覆蓋杏花嶺地區(qū)。

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷，它還有一個響應最好的Grid系統(tǒng)，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現(xiàn)需要的幾乎任何類型的網(wǎng)站的功能，此外，所有這些組件都是響應式的。

最近在學spring boot ，學習一個框架無非也就是使用它來做以前做的事情，兩者比較才有不同，說一下自己使用的體會。
先來說下spring boot ，微框架?？焖匍_發(fā)，相當于零配置，從一個大神那看來的說：spring boot 相當于框架的框架 ，就是集成了很多，用哪個添加哪個的依賴就行，這樣的話自己看不到配置，對于習慣了使用配置剛使用spring boot的開發(fā)者來說可能還有點不習慣，什么都不用配，看不到配置感覺對項目整體架構有點陌生，再說在spring boot 中使用 thymeleaf 。就拿個最簡單的例子來說明 jsp顯示helloworld , thymeleaf顯示helloworld，兩者也就pom文件引入依賴和屬性文件配置不同，在你使用jsp的時候不要引入thymeleaf的依賴，當然在使用thymeleaf的時候也不要引入jsp的依賴 有可能會產(chǎn)生沖突，spring boot 官方是推薦使用thymeleaf 我個人感覺也不錯，開始項目吧！

1 、首先 建一個meaven項目 看一下建好的項目整體結構

建好項目結構弄pom.xml ,這個demo只用到thymeleaf，沒有數(shù)據(jù)庫方面的依賴，所需依賴很少

 
 4.0.0 
 Springboot_bootstrap 
 Springboot_bootstrap 
 0.0.1-SNAPSHOT 
  
 org.springframework.boot 
 spring-boot-starter-parent 
 1.4.7.RELEASE 
   
  
 
  
 UTF-8 
 UTF-8 
 1.8 
  
 
  
  
 org.springframework.boot 
 spring-boot-starter 
  
 
  
 org.springframework.boot 
 spring-boot-starter-web 
  
 
  
 
  
 org.springframework.boot 
 spring-boot-starter-thymeleaf 
  
 
  
 
  
  
  
 org.springframework.boot 
 spring-boot-maven-plugin 
  
  
  

在src /main/resource 建立 application.properties文件

server.port=8080 
server.session.timeout=10 
server.tomcat.uri-encoding=UTF-8 
 
spring.thymeleaf.prefix=classpath:/views/ 
spring.thymeleaf.suffix=.html 
spring.thymeleaf.mode=HTML5 
spring.thymeleaf.encoding=UTF-8 
spring.thymeleaf.content-type=text/html 
spring.thymeleaf.cache=false

寫入口程序

package com.zanghan.youyu; 
 
import org.springframework.boot.SpringApplication; 
import org.springframework.boot.autoconfigure.SpringBootApplication; 
 
@SpringBootApplication 
public class YouYuApplication { 
 
 public static void main(String[] args) { 
 SpringApplication.run(YouYuApplication.class, args); 
 } 
}

控制器跳轉bootstrap界面

package com.zanghan.youyu.controller; 
 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.RequestMapping; 
 
@Controller 
public class LoginController { 
 @RequestMapping("/") 
 public String index(){ 
 return "/index"; 
 } 
}

引入bootstrap js css 放在哪里？放在static文件夾里，views中放的是頁面

index.html界面存放在 src/main/resource 下的views 文件夾里，為啥不是tepmlates 因為在屬性配置文件中寫的是views ，thymeleaf 的前綴和后綴都可以改變的

 
 
 
  
  
  
  
  
  
  
  
  
  
  
  
  
 
  
  
  
  
  
  
 body { 
 font-size: 12px; 
 } 
 
 .nav > li > a { 
 padding: 5px 10px; 
 } 
 
 .tab-content { 
 padding-top: 3px; 
 } 
  
 
 
  
 
  
  
   
   
   
  
  
   
  
  Primaopto 
   
  
  
  
  
 
  
  
   
   
   
  歡迎光臨, 
  1310177 
   
 
   
   
   
  
 
   
   
  設置 
   
  
 
  
 
   
   
  個人資料 
   
  
 
   
  
 
   
   
  退出