SpringBoot整合前端Bootstrap框架

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张图片SpringBoot整合前端Bootstrap框架_第2张图片
SpringBoot整合前端Bootstrap框架_第3张图片
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张图片

问题解决:

css资源下载失败:
先改为以下内容执行刷新页面,在返回正确内容重刷新

<!--<link rel="stylesheet" href="/css/bootstrap/bootstrap.css"/>-->
 <script src="css/bootstrap/bootstrap.css"></script>

你可能感兴趣的:(自己)