A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 逆风TO 黑马粉丝团   /  2019-9-19 09:14  /  1005 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

1、下载:https://getbootstrap.com/
2. 引用到自己工程中(复制粘贴(4.3.1  css/js))
3.  
<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">
在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>



0 个回复

您需要登录后才可以回帖 登录 | 加入黑马