springboot經過jar包方式引入bootstrap

時間 2019-12-06

標籤 springboot 經過 jar 方式引入 bootstrap 欄目 Spring 简体版

原文原文鏈接

1、springboot引入bootstrap的兩種方式

SpringBoot結合前端有主要有兩種方法，一種是在static裏面直接加入下載的bootstrap中的css或js；另外一種是引入webjars，以jar包的形式加入項目。
手動在static中引入bootstrap須要本身去手動下載bootstrap，而引入webjars經過jar包方式就須要配置pom.xml便可。
webjars方式引入bootstrap，實際上就是經過webjars方式管理前端靜態資源的方式，具體的能夠參考：https://www.jianshu.com/p/66d...
WebJars官網找到項目所需的依賴，例如在pom.xml引入 jQuery、BootStrap前端組件等。

2、webjars方式引入

新建一個SpringBoot Web項目。而後在pom文件引入webjars的jar，pom文件代碼以下：css

<dependency>
           <groupId>org.webjars</groupId>
           <artifactId>bootstrap</artifactId>
           <version>3.3.5</version>
       </dependency>
       <dependency>
           <groupId>org.webjars</groupId>
           <artifactId>jquery</artifactId>
           <version>3.1.1</version>
       </dependency>

而後咱們觀察下項目的依賴包：

而後在src/main/resources/templates文件下新建index.html，代碼以下：html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Dalaoyang</title>
   <link rel="stylesheet" href="/webjars/bootstrap/3.3.5/css/bootstrap.min.css" />
   <script src="/webjars/jquery/3.1.1/jquery.min.js"></script>
   <script src="/webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><br/>
   <div class="alert alert-success">
       <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
       <h3>index首頁</h3>Hello, <strong>springboot and bootstrap！！！</strong>
   </div>
</div>
</body>
</html>