BootStrap用法

最新推荐文章于 2024-09-07 09:39:11 发布

lijinchao1234

最新推荐文章于 2024-09-07 09:39:11 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/weixin_45135790/article/details/100937226

版权

1、下载：https://getbootstrap.com/

2. 引用到自己工程中（复制粘贴（4.3.1 css/js））


<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="vendor/bootstrap-4.3.1-dist/css/bootstrap.min.css">

有的是引用的在线资源，中国在线资源 https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js

有的是本地资源（本地资源路径要注意）

4. 初级入门：

table表格关键点在class=.....

封装：

在templates下新建common/include.html common/link.html

include.html:

<!--jquery-->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!--bootstrap-->
<script src="vendor/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>

link.html:

<link rel="stylesheet" type="text/css" href="/vendor/sweetalert/dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="/vendor/bootstrap-4.3.1-dist/css/bootstrap.css">

在html页面调用方式：用到了thymeleaf框架（SpringBoot官方推荐的框架）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <th:block th:replace="common/include"></th:block>
    <th:block th:replace="common/link"></th:block>
</head>
<body style="text-align: center">
    <span style="font-size: 60px;">首页</span>
</body>
</html>