一、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 前端组件等。
二、webjars 方式引入
-
新建一个 SpringBoot Web 项目。然后在 pom 文件引入 webjars 的 jar,pom 文件代码如下:
<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/static 文件下新建 index.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>
- 配置结束,启动项目,访问 http://localhost:8888/
三、参考链接
https://www.cnblogs.com/dalao…
[https://www.cnblogs.com/dalao…][7]