SpringBoot整合前端Bootstrap框架

最新推荐文章于 2024-04-21 06:35:14 发布

weixin_45893244

最新推荐文章于 2024-04-21 06:35:14 发布

阅读量3.6k

点赞数 1

分类专栏：自己

本文链接：https://blog.csdn.net/weixin_45893244/article/details/103451864

版权

自己专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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文件
在这里插入图片描述

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
结果如下所示：
在这里插入图片描述

问题解决：

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

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

weixin_45893244

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot整合前端Bootstrap框架

顺序不可变<link rel="stylesheet" href="/css/bootstrap/bootstrap.css"/><script ...
复制链接

扫一扫