1. 程式人生 > >在springboot中整合bootstrap

在springboot中整合bootstrap

比較簡單,不要想的太複雜了。

首先匯入依賴bootstrap與jquery:

  1. <!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
  2.         <!-- bootstrap -->
  3.         <dependency>
  4.             <groupId>org.webjars</groupId>
  5.             <artifactId>bootstrap</artifactId>
  6.             <version>3.3.5
    </version>
  7.         </dependency>
  8.         <dependency>
  9.             <groupId>org.webjars</groupId>
  10.             <artifactId>jquery</artifactId>
  11.             <version>3.1.1</version>
  12.         </dependency>
然後在html檔案中加入相應版本:
  1. <!DOCTYPE html>
  2. <html>
  3. <
    head>
  4. <scriptsrc="webjars/jquery/3.1.1/jquery.min.js"></script>
  5. <scriptsrc="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  6. <linkrel="stylesheet"href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
  7. <metacharset="UTF-8">
  8. <title>Insert title here</title>
  9. </head
    >
  10. <body>
  11.     <h2>hello zhangyan</h2>
  12.     <divclass="container">
  13.         <h2>Button</h2>
  14.         <p>.btn 類是按鈕的基本樣式:</p>
  15.         <buttontype="button"class="btn-warning">基本按鈕</button>
  16.     </div>
  17. </body>
  18. </html>
關鍵的三句:

<script src="webjars/jquery/3.1.1/jquery.min.js"></script>
<script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />  

專案結構圖:

然後就可以了。

不要在poi.xml中加build那些,嘗試會有問題。

注:Spring Boot 會從以下路徑尋找靜態檔案:

  • /META-INF/resources/
  • /resources/
  • /static/
  • /public/

Controller程式碼如下:

  1. @Controller
  2. publicclass BackIndexController {  
  3.     @RequestMapping(value = "/",method = RequestMethod.GET)  
  4.     public String index() {  
  5.         return"backindex.html";  
  6.     }  
  7. }  
需要加入字尾。