黑马程序员技术交流社区
标题:
【西安校区】BootStrap用法
[打印本页]
作者:
逆风TO
时间:
2019-9-19 09:14
标题:
【西安校区】BootStrap用法
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>
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2