spring boot 中集成 bootstrap

问题的核心在于如何导入相关依赖以及如何在前端页面中进行使用

627 次阅读改进

1 个解决方案

Doraemon

华为云计算工程师

共有三种方法：

1 . 下载

在 bootstrap 官网下载用于生产环境的 Bootstrap 文件，解压后放在 static 文件夹中

2 . CDN 加速服务

Bootstrap 中文网为 Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。

<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

3 . maven

首先导入依赖 bootstrap 和 jquery

<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->  
        <!-- bootstrap -->  
        <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>

然后在 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" />

改进