springboot通过jar包方式引入bootstrap

0

一、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/templates文件下新建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. 引入的bootstrap包的路径可以通过官网进行查看:
    图片描述
    图片描述
  5. 配置结束,启动项目,访问http://localhost:8888/
    图片描述

三、参考链接

https://www.cnblogs.com/dalao...
[https://www.cnblogs.com/dalao...][9]

你可能感兴趣的

载入中...