目录
一、初识BootStrap
响应式布局的优缺点：
响应式布局的使用场景：
1.1 Bootstrap3和4的区别
- CSS预处理器不同, Bootstrap3采用Less, Bootstrap4采用SASS
- 格栅种类不同, Bootstrap3提供4种格栅, Bootstrap4提供5种格栅
- 使用单位不同, Bootstrap3使用px作为单位, Bootstrap4使用rem作为单位
- 内部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用flexbox布局
- ... ...
1.2 Bootstrap兼容性
Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
IE8以上都能完美使用, IE8以下需要通过一些额外的配置来保证其完整性
1.3 Bootstrap3基础模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<!--为了让 IE 浏览器运行最新的渲染模式下-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自己网页的标题</title>
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<!--导入respond.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用媒体查询-->
<!--导入html5shiv.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用H5新增的标签-->
<!--
[if xxx] ![endif]这个是IE中的条件注释, 只有在IE浏览器下才会执行
以下代码的含义: 如果当前是IE9以下的浏览器, 那么就导入以下的两个JS文件
-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.12.4.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>1.4 Bootstrap4基础模板
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>自己网页的标题</title>
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>我们这里主要以 Bootstrap4 为演示！！！
二、Bootstrap容器
在Bootstrap中容器是响应式布局的基础, Bootstrap推荐将所有内容都定义在容器之中，并且容器是启用Bootstrap栅格系统必不可少的前置条件
2.1 Bootstrap提供的容器
Bootstrap中提供了两个容器: container/container-fluid
container容器(固定容器):
只要给标签添加了container类名, 这个标签就变成了Bootstrap的container容器
只要这个标签变成了Bootstrap的container容器, 在不同视口大小下就会有不同的固定宽度
container-fluid(自适应宽度容器)：
只要给标签添加了container-fluid类名, 这个标签就变成了Bootstrap的container-fluid容器
只要这个标签变成了Bootstrap的container-fluid容器, 那么容器的宽度永远都是100%自适应
2.2 Bootstrap视口的划分
Bootstrap4将视口划分为了5钟：
- 超小屏幕(xs): <576px
- 小屏幕(sm): >=576px
- 中等屏幕(md):>=768
- 大屏幕(lg): >=992px
- 超大屏幕(xl): >= 1200px
| Extra small <576px | Small ≥576px | Medium ≥768px | Large ≥992px | Extra large ≥1200px | |
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
三、栅格系统
Bootstrap的栅格系统使用一系列的"行"和"列"来实现复杂的响应式布局，默认情况下栅格系统会将一行的内容等分为12份，然后我们可以通过绑定类名的方式指定这一行中的每一列占用多少分
公共部分：
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>3.1 栅格系统格式
<容器>
<行>
<列>我们的内容</列>
<列>我们的内容</列>
... ...
</行>
</容器>
示例：
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>3.2 栅格系统特点
默认情况下行的宽度和所在容器一样
默认情况下所有列的宽度是等分所在行的宽度
可以通过col-num方式指定当前列占用12分之几
如果一行中内容的宽度超过了12分, 那么将自动换行
示例：
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}<div class="container">
<span class="row">
<div class="col-6">我是第1列</div>
<div class="col-4">我是第2列</div>
<div class="col-6">我是第3列</div>
</span>
</div>
3.3 栅格系统的实现原理
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
div{
height: 100px;
background: red;
}
.row{
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.container>.row{
height: 100%;
background: blue;
}
.col{
flex: 1;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}
.col-6{
flex-basis: 50%;
}<div class="container"> <!--容器使用媒体查询-->
<span class="row"> <!--行和列使用flex布局-->
<div class="col-6">我是第1列</div>
<div class="col">我是第2列</div>
<div class="col">我是第3列</div>
</span>
</div>
3.4 栅格系统尺寸设置
i. Bootstrap的固定宽度容器提供了5种响应的尺寸,同样Bootstrap也给列提供了5种响应的尺寸：
col-*: 设置超小屏幕
col-sm-*:设置小屏幕
col-md-*:设置中等屏幕
col-lg-*:设置大屏幕
col-xl-*:设置超大屏幕
ii. 栅格系统列的尺寸特点：
如果只设置了小屏幕的大小, 那么大屏幕也会采用小屏幕设置的大小
如果值设置了大屏幕的大小, 那么小屏幕默认100%
如果大小屏幕都设置了大小, 那么在什么屏幕就显示什么尺寸
示例：
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}<div class="container">
<span class="row">
<!--超小屏-->
<!--<div class="col-6">我是第1列</div>
<div class="col-4">我是第2列</div>
<div class="col-2">我是第3列</div>-->
<!--超大屏-->
<!--<div class="col-xl-6">我是第1列</div>
<div class="col-xl-4">我是第2列</div>
<div class="col-xl-2">我是第3列</div>-->
<div class="col-lg-2 col-xl-6">我是第1列</div>
<div class="col-lg-4 col-xl-4">我是第2列</div>
<div class="col-lg-6 col-xl-2">我是第3列</div>
</span>
</div>超大屏幕下：
大屏及其以下：
3.5 栅格系统对齐方式
栅格系统-沟槽：
即内容距离这一列的间隙
BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，您可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列，但是容器默认也有沟槽，这时可以使用.px-0类来消除最外层的容器的沟槽
示例：
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}<div class="container px-0">
<span class="row no-gutters">
<div class="col-6">我是第1列</div>
<div class="col-2">我是第2列</div>
<div class="col-2">我是第3列</div>
</span>
</div>
栅格系统列-对齐方式：
Bootstrap4的格栅系统是使用伸缩布局实现的, 所以也可以通过类名快速的设置伸缩项的在主轴和侧轴对齐方式
示例：
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}<div class="container">
<!--水平方向主轴对齐方式：
justify-content-end：和终点对齐
justify-content-start：和起点对齐（默认）
justify-content-center：居中对齐
justify-content-between：两端对齐
-->
<!-- <span class="row justify-content-between"> -->
<!--垂直方向侧轴对齐方式
align-items-start：顶部对齐
align-items-end：底部对齐
align-items-center：居中对齐
-->
<span class="row align-items-center">
<div class="col-6">我是第1列</div>
<div class="col-2">我是第2列</div>
<div class="col-2">我是第3列</div>
</span>
</div> justify-content-end，
justify-content-start，
justify-content-center，
justify-content-between，
align-items-start，
align-items-end，
align-items-center，
3.6 栅格系统偏移和排序
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}列偏移：
offset-*: 当前列偏移多少份位置
注意点: 写在哪一列就是哪一列偏移
示例1：
<div class="container">
<span class="row justify-content-center">
<div class="col-2">1</div>
<div class="col-2">2</div>
<div class="col-2">3</div>
</span>
</div>
<div class="container" style="margin-top: 20px">
<span class="row">
<div class="col-2 offset-3">1</div>
<div class="col-2">2</div>
<div class="col-2">3</div>
</span>
</div>
示例2：
<div class="container">
<span class="row justify-content-between">
<div class="col-2">1</div>
<div class="col-2">2</div>
</span>
</div>
<div class="container" style="margin-top: 20px">
<span class="row">
<div class="col-2">1</div>
<div class="col-2 offset-8">2</div>
</span>
</div>
列排序：
order-*: 从小到大顺序排序, 小的在前面, 大的在后面
注意点: 没有排序的列位置不会发生变化, 只有排序的列才参与位置变化
示例：
<div class="container">
<span class="row">
<div class="col-2 order-3">1</div>
<div class="col-2 order-2">2</div>
<div class="col-2 order-1">3</div>
</span>
</div>
3.7 示例
.row>[class^=col-] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}
.row>[class^=col] {
padding-top: .75rem;
padding-bottom: .75rem;
background-color: rgba(86, 61, 124, .15);
border: 1px solid rgba(86, 61, 124, .2);
}1. 等宽列可以分成多行
<!-- 无论什么屏幕下都两行两列 -->
<div class="container-fluid">
<div class="row">
<div class="col"></div>
<div class="col"></div>
<!--引入 w-100 进行切割操作-->
<div class="w-100"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
总结：col后面"添"（加后缀，例如：cool-3）就是按比例等分；"不添"（不加后缀，例如：col）就是自动等分；
2. 可变宽度的弹性空间
使用col-{breakpoint}-auto断点方法，可以实现根据其内容的自然宽度来对列进行大小调整
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>3. 混合布局
<!--
定义在超小屏幕下各占1/2，而其他场景以各占三分之一并排
-->
<div class="row">
<div class="col-6 col-md-4">col-6 col-md-4</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
<div class="col-6 col-md-4">col-6 col-md-4</div>
</div>
四、公共样式
具体请参考：Borders · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
公共部分：
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css"><!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>4.1 颜色和边框
div{
width: 100px;
height: 100px;
margin-left: 10px;
}a.文字颜色：
- 柔和灰（text-muted）
- 主要蓝（text-primary）
- 次要灰（text-secondary）
- 成功绿（text-success）
- 危险红（text-danger）
- 警告黄（text-warning）
- 危息绿（text-info）
- 黑白对比（text-dark）
- 注意点: .text-white 、 .text-muted这两个样式不支持链接上使用
示例：
<p class="text-success">公共样式</p>
<p class="text-danger">公共样式</p>
<p class="text-warning">公共样式</p>
b.背景颜色：
- 主要蓝（bg-primary）
- 次要灰（bg-secondary）
- 成功绿（bg-success）
- 危险红（bg-danger）
- 警告黄（bg-warning）
- 危息绿（bg-info）
- 黑白对比（bg-dark）
示例：
<p class="bg-success">公共样式</p>
<p class="bg-danger">公共样式</p>
<p class="bg-warning">公共样式</p>
c.边框相关：
快速添加边框
border / border-*
快速删除边框
border-0 / border-*-0
快速指定边框颜色
border-color
快速添加边框圆角
rounded / rounded-*
示例：
<div class="border-top border-left border-warning"></div>
<div class="border border-warning rounded-circle"></div>
4.2 显示模式和布局方式
i.显示模式:
d-*
d-屏幕尺寸-*
<div class="bg-success d-inline d-sm-inline-block d-md-block">我是div</div>
ii. 浮动和清除浮动:
float-*
float-屏幕尺寸-*
clearfix
<div class="bg-success clearfix">
<div class="float-left">左边</div>
<div class="float-right">右边</div>
</div>
iii. position-*
<div class="position-relative">我是div</div>
4.3 其它
在Bootstrap中可以通过m-* / p-* 快速添加间隙
<div class="bg-success m-auto" style="width: 200px; height: 200px"></div>
<div class="bg-success pt-5" style="width: 200px; height: 200px">我是div</div>
在Bootstrap中可以通过 list-unstyled 快速去除项目符号
<ol class="list-unstyled">
<li>我是第1个li</li>
<li>我是第2个li</li>
<li>我是第3个li</li>
</ol>
在Bootstrap中可以通过 img-fluid快速设置等比拉伸图片
<img src="images/img1.jpg" class="img-fluid">
在Bootstrap中可以通过 img-thumbnail快速设置缩略图样式
<div class="bg-success">
<img src="images/img1.jpg" class="img-thumbnail">
</div>
4.4 示例
示例1
<div class="container">
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
</div>
<div class="container">
<p class="h1">h1.BootStrap heading</p>
<p class="h2">h2.BootStrap heading</p>
<p class="h3">h3.BootStrap heading</p>
<p class="h4">h4.BootStrap heading</p>
<p class="h5">h5.BootStrap heading</p>
<p class="h6">h6.BootStrap heading</p>
</div>
<h3>
Fancy display heading
<small class="text-muted">With faded secondary text</small>
</h3>
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
</div>
示例2：
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
示例3：
<blockquote class="blockquote">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
<blockquote class="blockquote">
<p class="mb-0">爱上一个地方，就应该背上包去旅游，走得更远。</p>
<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>
<blockquote class="blockquote text-center">
<p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>
<blockquote class="blockquote text-right">
<p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
</blockquote>
示例4：
<var>y</var> = <var>m</var><var>x</var> + <var>b</var> To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
<samp>这是一个代码示例.</samp>
示例5：
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
示例6：
<figure class="figure">
<img src="./images/m.jpeg" class="figure-img img-fluid rounded size" alt="...">
<figcaption class="figure-caption">A caption for the above image.</figcaption>
</figure>
<figure class="figure">
<img src="./images/m.jpeg" class="size figure-img img-fluid rounded" alt="...">
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
</figure>
五、常用组件
5.1 提示框/警告框组件
参考网址：警告框（Alert） · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
什么是role：
role属性用于增强语义性, 当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明
，比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button
什么是aria-xxx：
aria全称: Accessible Rich Internet Applications，这一套协定是w3和apple为了"残疾人士"无障碍使用网站的
什么是aria-hidden：
为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性
示例：
.alert{
padding: 0;
}<div class="alert alert-success" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<img src="images/ad.jpg" alt="">
<!--
data-dismiss="alert" 告诉bt需要关闭谁
-->
<button type="button" class="close" data-dismiss="alert">
<span>×</span>
</button>
</div>
5.2 按钮组件
具体请参考：按钮（Buttons） · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
具体请参考：Button group · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
<!--按钮组件-->
<button type="button" class="btn btn-primary">Primary</button>
<input type="button" value="我是按钮" class="btn btn-success">
<a href="#" class="btn btn-danger">我是按钮</a>
<!--按钮组组件-->
<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div>
5.3 卡片组件
具体请参考：Cards · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/img1.jpg">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
5.4 轮播图组件
具体请参考：Carousel · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
class="carousel slide" 创建一个轮播图组件
data-ride="carousel" 自动轮播
class="carousel-indicators" 创建指示器
data-target="#carouselExampleIndicators" 告诉bootstrap当前的索引属于哪一个轮播图
data-slide-to="0" 指定当前指示器的索引
class="active" 设置默认选中的指示器索引
class="carousel-inner" 创建轮播图的内容部分
...
示例：
<!--
1.class="carousel slide" 创建一个轮播图组件
2.data-ride="carousel" 自动轮播
-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!--
1.class="carousel-indicators" 创建指示器
2.data-target="#carouselExampleIndicators" 告诉bootstrap当前的索引属于哪一个轮播图
3.data-slide-to="0" 指定当前指示器的索引
4.class="active" 设置默认选中的指示器索引
-->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--
1.class="carousel-inner" 创建轮播图的内容部分
2.class="carousel-item" 指定轮播图的每一页
-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/img1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/img2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/img3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<!--
1.class="carousel-control-prev" 创建上一页的控制按钮
2. href="#carouselExampleIndicators" 指定控制按钮可用控制哪一个轮播图
-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
5.5 折叠面板组件
具体请参：Collapse · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
data-toggle="collapse" 告诉bootstrap需要切换的是折叠面板
href="#collapseExample" 告诉bootstrap需要切换的是哪一个折叠面板
class="collapse" 创建一个折叠面板
示例：
<!--
1.data-toggle="collapse" 告诉bootstrap需要切换的是折叠面板
2.href="#collapseExample" 告诉bootstrap需要切换的是哪一个折叠面板
-->
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button">
我是按钮
</a>
<!--
1.class="collapse" 创建一个折叠面板
注意点: 折叠面板默认情况下是不会显示的
-->
<div class="collapse bg-danger" id="collapseExample">
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
</div>
5.6 下拉菜单组件
具体请参考：Dropdowns · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
示例：
<!--
1.class="dropdown" 创建一个下拉菜单的容器
-->
<div class="dropdown">
<!--
1.dropdown-toggle: 指定菜单按钮的小箭头
2.data-toggle="dropdown": 告诉bootstrap需要切换的是下拉菜单
-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
我是按钮
</button>
<!--
1.class="dropdown-menu": 创建一个弹出的下拉菜单
2.class="dropdown-item": 指定菜单项
-->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
5.7 模态弹窗组件
具体请参考：Modal · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
data-toggle="modal": 告诉bootstrap需要切换的是模态弹窗
data-target="#exampleModal": 告诉bootstrap需要切换的是哪一个模态弹窗
示例：
<!--
1.data-toggle="modal": 告诉bootstrap需要切换的是模态弹窗
2.data-target="#exampleModal": 告诉bootstrap需要切换的是哪一个模态弹窗
-->
<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
我是按钮
</button>
<!--
class="modal fade": 创建模态弹窗的容器
-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
<!--
1.class="modal-dialog": 创建真正弹出的内容
-->
<div class="modal-dialog" role="document">
<div class="bg-danger">
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
</div>
</div>
</div>
5.8 提示气泡组件
具体请参考：Popovers · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
示例：
<div style="margin: 200px">
<!--
1.data-toggle="tooltip": 告诉bootstrap需要切换的是提示气泡
2.data-placement="top": 告诉bootstrap提示气泡出现的位置
3.title="Tooltip on top": 告诉bootstrap提示气泡中提示的内容是什么
-->
<!--
<button class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="内容是什么">
我是按钮
</button>
-->
<!--
1.data-container="body": 当你在一个父元素上有一些样式与提示框产生样式干扰，你可以指定一个自定义的container容器，这样提示框的HTML将出现在这个元素内部了。
2.data-toggle="popover": 告诉bootstrap需要切换的是提示气泡
3.data-placement="top": 告诉bootstrap提示气泡出现的位置
4.data-content="": 告诉bootstrap提示气泡中提示的内容是什么
-->
<button class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="我是内容我是内容">
我是按钮
</button> /*
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
*/
$('button').popover()
5.9 导航栏组件
具体请参考：Navbar · Bootstrap v4 中文文档 v4.6 | Bootstrap 中文网
示例：
<!--
1.class="navbar": 告诉Bootstrap需要创建一个响应式的导航栏
2.class="navbar-expand-lg": 告诉Bootstrap在哪一种屏幕尺寸上需要展示完整的导航栏
3.class="navbar-light bg-light": 设置导航栏的主题样式
-->
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<!--
1.class="navbar-brand": 指定导航栏中公司的品牌信息(公司名称/LOGO)
-->
<a class="navbar-brand" href="#">bootstrap</a>
<!--
1.class="navbar-toggler": 创建一个移动端的菜单按钮
2.data-toggle="collapse": 告诉bootstrap需要切换的是折叠面板
3.data-target="#navbarSupportedContent": 告诉bootstrap需要切换的是哪一个折叠面板
4.class="navbar-toggler-icon": 设置按钮的字体图标
-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<!--
1.class="collapse": 创建一个折叠面板
注意点: 折叠面板默认情况下是不会显示的
2.class="navbar-collapse":用于通过父断点进行分组和隐藏导航列内容
-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!--
1. class="navbar-nav": 创建导航栏的菜单
2. class="nav-item": 创建导航来的菜单项
-->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
到这里 Boootstrap 就已经介绍完啦，更多的请参考：Bootstrap中文网
5.10 综合案例
公共部分：
<link rel="stylesheet" href="css/grid.css">
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
img {
width: 100%;
}
body {
padding-top: 100px;
}
.container {
background-color: #eee;
}
</style>示例1：
<div class="container">
<div class="row">
<!--原始
<div class="col-12 col-sm-12 col-md-4 col-lg-4 cool-xl-4">
<img src="img/2-1.jpg" alt="">
</div>
-->
<!--
简化
-->
<div class="col-md-4">
<img src="img/2-1.jpg" alt="">
</div>
<div class="col-md-4">
<img src="img/2-2.jpg" alt="">
</div>
<div class="col-md-4">
<img src="img/2-3.jpg" alt="">
</div>
</div>
</div>中屏、大屏、超大屏下：
小屏、超小屏下：
示例2：
<div class="container">
<div class="row">
<!--原始
<div class="col-12 col-sm-12 col-md-4 col-lg-4 cool-xl-4">
<img src="img/2-1.jpg" alt="">
</div>
-->
<!--
简化
-->
<div class="col-md-4">
<img src="img/2-1.jpg" alt="">
</div>
<!--col-md-push-4：在中屏及其以上才会生效
col-md-push-4也可以等价于col-md-offset-4
-->
<div class="col-md-4 col-md-push-4">
<img src="img/2-2.jpg" alt="">
</div>
</div>
</div>中屏、大屏、超大屏下：
小屏、超小屏下：
示例3：
<div class="container">
<div class="row">
<!--原始
<div class="col-12 col-sm-12 col-md-4 col-lg-4 cool-xl-4">
<img src="img/2-1.jpg" alt="">
</div>
-->
<!--
简化
-->
<!--
在中屏及其以上时，第1张图片向右推4个
-->
<div class="col-md-4 col-md-push-4">
<img src="img/2-1.jpg" alt="">
</div>
<!-- 在中屏及其以上时，第2张图片向左拉4个 -->
<div class="col-md-4 col-md-pull-4">
<img src="img/2-2.jpg" alt="">
</div>
</div>
</div>中屏、大屏、超大屏下：
小屏、超小屏下：
示例4：
<div class="container">
<div class="row">
<!--原始
<div class="col-12 col-sm-12 col-md-4 col-lg-4 cool-xl-4">
<img src="img/2-1.jpg" alt="">
</div>
-->
<!--
简化
-->
<!--
-->
<div class="col-md-4">
<img src="img/2-1.jpg" alt="">
</div>
<!-- -->
<div class="col-md-4">
<img src="img/2-2.jpg" alt="">
</div>
<!--
控制第3张图片只在中屏及其以上才显示，在小屏和超小屏下不显示
-->
<div class="col-md-4 d-none d-md-block">
<img src="img/2-3.jpg" alt="">
</div>
</div>
</div>中屏、大屏、超大屏下：
小屏、超小屏下：
示例5：
<div class="container">
<div class="row">
<!--原始
<div class="col-12 col-sm-12 col-md-4 col-lg-4 cool-xl-4">
<img src="img/2-1.jpg" alt="">
</div>
-->
<!--
简化
-->
<!--
-->
<div class="col-md-4">
<img src="img/2-1.jpg" alt="">
</div>
<!-- -->
<div class="col-md-4">
<img src="img/2-2.jpg" alt="">
</div>
<!--
控制第3张图片只在中屏及其以上才不显示，在小屏和超小屏下显示
-->
<div class="col-md-4 d-md-none">
<img src="img/2-3.jpg" alt="">
</div>
</div>
</div>中屏、大屏、超大屏下：
小屏、超小屏下：
1365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
