乐趣区

springboot通过jar包方式引入bootstrap

一、springboot 引入 bootstrap 的两种方式

  1. SpringBoot 结合前端有主要有两种方法,一种是在 static 里面直接加入下载的 bootstrap 中的 css 或 js;另一种是引入 webjars,以 jar 包的形式加入项目。
  2. 手动在 static 中引入 bootstrap 需要自己去手动下载 bootstrap,而引入 webjars 通过 jar 包方式就需要配置 pom.xml 即可。
  3. webjars 方式引入 bootstrap,实际上就是通过 webjars 方式管理前端静态资源的方式,具体的可以参考:https://www.jianshu.com/p/66d…
  4. WebJars 官网找到项目所需的依赖,例如在 pom.xml 引入 jQuery、BootStrap 前端组件等。

二、webjars 方式引入

  1. 新建一个 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>
  2. 然后我们观察下项目的依赖包:
  3. 然后在 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>
  4. 配置结束,启动项目,访问 http://localhost:8888/

三、参考链接

https://www.cnblogs.com/dalao…
[https://www.cnblogs.com/dalao…][7]

退出移动版