BootStrap的使用
1.在前端页面中引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置web页面的初始缩放比例；
initial-scale=1则将显示未经缩放的web文档
-->
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>BootStrap的引入</title>
<!--载入BootStrap的css-->
<link href="css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<h1>Hello World!!!</h1>
<!--引入BootStrap的JS必须先引入JQuery,因为bootStrap的组件是基于JQUERY的-->
<script src="js/jquery-3.6.0.js"></script>
<!---->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2. BootStrap在线引入模板（使用之前必须要有网络）
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
3.BootStrap的布局容器和栅格网格系统
3.1布局容器
(1) .container类用于固定宽度并支持响应式布局的容器（网页不是百分百呈现，而是两侧有空白）
<div class="container">
...
</div>
(2) .container-fluid类用于100%宽度，占据全部视口（viewport）的容器
<div class="container-fluid">
...
</div>
3.2栅格网络系统
3.2.1 列组合
栅格网络系统会自动分为最多12列
注意：网格系统必须使用到css
container,row,xs(xsmall phones),sm(small tables),md(middle desktops),lg(larger desktops)就是超小屏（自动），小屏（750px）,中屏（970px）和大屏（1170px）
注意：1行只能最多占12列，如果超过12列就会自动换行。
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>栅格网络系统</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body>
<!--如果没有栅格网络系统连续使用两个div就会自动换行，而使用栅格网络系统就不会-->
<div style="background-color: #1b6d85">4</div>
<div style="background-color: #2b542c">8</div>
<hr/>
<!--布局容器栅格系统-->
<div class="container">
<!-- 行元素 -->
<div class="row">
<!-- 列元素 col-xs-数值 col-md-数值 col-sm-数值 col-lg-数值-->
<div class="col-md-4" style="background-color: #1b6d85">4</div>
<div class="col-md-8" style="background-color: darkred">8</div>
</div>
</div>
</body>
</html>
运行结果：
注意如果不知道使用什么设备就可以在<div class="col-md-4"中的col-md-4后直接加上col-lg-4（大屏占比）这样操作。到时候系统会自动就算到底要占多少。
占几行用几行，如果只能均等份分割，最多12个，只能均等份分割。也可以不均等份分割但是相加和只能是12。
<!--占几行用几行-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
运行结果：
<!--均等份分割-->
<div class="row">
<div class="col-md-6" style="background-color: #2b542c">1</div>
<div class="col-md-6" style="background-color: #eea236">1</div>
</div>
运行结果：
注意列的总数不能超过12.如果超过12系统就会自动换行。（最后一项超过12的部分）
3.2.2列偏移
列偏移就是两个div之间如果想要有间距就可以添加列偏移（col-md-offset-数值）
注意：列偏移数值和列组合数值相加不能超过12
例子（四个中第二个与第一个相邻间距一列）：
<!--列偏移-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1 col-md-offset-1" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
运行结果：
这个是不加列偏移的效果：
3.2.3列排序
列排序就是改变列的方向，就是改变左右浮动，并且设置浮动距离，在bootStrap中使用col-md-push-数值（这里的数值就是浮动距离）（注意如果浮动后的位置本身就有东西，那么本身就有的东西就会覆盖掉浮动后的东西）push就是向右，pull就是向左。
例子：
<!--列排序-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1 col-md-push-1" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
运行结果：
浮动之前：
浮动之后：
浮动之后橙色向右偏移，右边原来有东西就会被粉色的覆盖
浮动5个就是
<!--列排序-->
<div class="row">
<div class="col-md-1" style="background-color: #2b542c">1</div>
<div class="col-md-1 col-md-push-5" style="background-color: #eea236">1</div>
<div class="col-md-1" style="background-color: #e4b9b9">1</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
</div>
运行结果：
橙色向右浮动5个列宽，本身是第0个下一个是第一个，直到第五个
3.2.4列嵌套
列嵌套就是将12个列分为两个列，也就是1列占6个列宽，列嵌套就可以将6个列宽的宽度重新变成12份。
例子：
<!--列嵌套-->
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-1" style="background-color: navajowhite">1</div>
<div class="col-md-9" style="background-color: #2e6da4">9</div>
<div class="col-md-1" style="background-color: deeppink">1</div>
<div class="col-md-1" style="background-color: gold">1</div>
</div>
</div>
<div class="col-md-6" style="background-color: #eea236">6</div>
</div>
运行结果：