SpringBoot整合前端Bootstrap框架
发布时间：2023-08-17 13:00
Bootstrap （Web框架） 编辑
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。 [1] 国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
SpringBoot整合前端Bootstrap框架的实现
1.导入bootstrap的css和js文件、jquery文件
![\"SpringBoot整合前端Bootstrap框架_第1张图片\"](\"https://img.it610.com/image/info8/ddfeac091436457aba32209bb6cb42da.jpg\")
![\"SpringBoot整合前端Bootstrap框架_第2张图片\"](\"https://img.it610.com/image/info8/e15ad18afd504d8883d65d9bf860f024.jpg\")
![\"SpringBoot整合前端Bootstrap框架_第3张图片\"](\"https://img.it610.com/image/info8/c5e215f670fb4518a77ee3cd0ecceca5.jpg\")
2.HTML文件中引用导入的三个文件
顺序不可变
<!-- 动态资源默认存放路径在static下 -->
<link rel=\"stylesheet\" href=\"/css/bootstrap/bootstrap.css\"/>
<!-- <script src=\"css/bootstrap/bootstrap.css\"></script> -->
<script src=\"/js/jquery/jquery.js\"></script>
<script src=\"/js/bootstrap/bootstrap.min.js\" ></script>
3.编写前端页面进行测试
<!DOCTYPE html>
<html lang=\"en\" xmlns:th=\"http://www.thymeleaf.org\">
<head>
<!-- 动态资源默认存放路径在static下 -->
<link rel=\"stylesheet\" href=\"/css/bootstrap/bootstrap.css\"/>
<!-- <script src=\"css/bootstrap/bootstrap.css\"></script> -->
<script src=\"/js/jquery/jquery.js\"></script>
<script src=\"/js/bootstrap/bootstrap.min.js\" ></script>
<meta charset=\"UTF-8\">
<title>springboot-thymeleaf demo</title>
</head>
<body>
<!-- 获取后端中的name的值 -->
<p th:text=\"\'hello, \' + ${name1} + \'!\'\" />
<button>原始</button>
<button class=\"btn-warning\">警告</button>
<button class=\"btn-danger\">报警</button>
</body>
</html>
输入localhost:8080/hello
结果如下所示：
![\"SpringBoot整合前端Bootstrap框架_第4张图片\"](\"https://img.it610.com/image/info8/3fa968cf501c48b98ccaa24fb48c7ea8.jpg\")
问题解决：
css资源下载失败：
先改为以下内容执行刷新页面，在返回正确内容重刷新
<!--<link rel=\"stylesheet\" href=\"/css/bootstrap/bootstrap.css\"/>-->
<script src=\"css/bootstrap/bootstrap.css\"></script>