1.BootStrap快速入门
官网地址:https://www.bootcss.com/
下载:https://v3.bootcss.com/getting-started/
2.BootStrap引入问题:注意引入的顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap</title>
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
</head>
<body>
<!-- 注意引入的先后顺序 -->
<!-- 如果要使用BootStrap的js插件,需先导入jQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- 调用BootStrap的js插件,或者根据需要使用的js插件调用-->
<script src="bootStrap/js/bootstrap.min.js"></script>
<h1>hello World</h1>
</body>
</html>
3.固定宽度:两边留白
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap</title>
<link rel="stylesheet" href="bootStrap/css/bootstrap.min.css">
</head>
<body>
<!-- 注意引入的先后顺序 -->
<!-- 如果要使用BootStrap的js插件,需先导入jQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- 调用BootStrap的js插件,或者根据需要使用的js插件调用-->
<script src="bootStrap/js/bootstrap.min.js"></script>
<div class="container" style="background-color: #B2DBA1;height: 500px;">
如果要使用BootStrap的js插件,需先导入jQuery
</div>
</body>
</html>
4. 流式布局:两边不留白
<div class="container-fluid" style="background-color: #B2DBA1;height: 500px;">
如果要使用BootStrap的js插件,需先导入jQuery
</div>
5.流式栅格系统
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BootStrap</title>
<link rel="stylesheet" type="text/css" href="bootStrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: bisque">4</div>
<div class="col-md-8" style="background-color: deeppink">8</div>
</div>
</div>
</body>
</html>
6.媒体查询
7.列偏移
8.列排序
9.列嵌套:每一列还可以再分为12列
10.常用版式
结果:
11.强调效果:
12.对其效果
13.列表
14.代码风格![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8bcf5850706de52e96f4013bced5e890.png)
结果:
添加滚动条
15.表格
效果:
16.表单
复选框:
单选框:单选框的值取决于value,和外面的值是没有关系的
结果
按钮
表单布局
内联表单
缩略图
面板
BootStrap插件
导航
效果:
分页导航
效果:
下拉菜单
模态框
可查看菜鸟教程:https://www.runoob.com/bootstrap/bootstrap-modal-plugin.html
可以添加form表单
效果: