Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架。它不是单一的CSS或JavaScript框架，而是完整的HTML、CSS、JavaScript框架，你可以仅通过Bootstrap简单、快速的开发移动设备优先的响应式布局页面和应用。
一 Bootstrap简介
1，bootstrap文件目录
你可以在Bootstrap官网，下载不同版本的文件包，现在最新的版本是4.3.x。解压文件后有两个子文件夹，CSS和JS，他们的目录如下：
所有文件都有普通版和压缩版。.min的即是压缩版，去除了空白字符等，使文件更小。.map是Source map文件，需要特定的工具才可以使用。关于Source map文件详细情况可以参考这里阮一峰博客。或戳这里。
bootstrap.css是Bootstrap的核心CSS文件，一般根据需要选择bootstrap.css或bootstrap.min.css即可。bootstrap-grid.css是Bootstrap提供的单独使用其栅格系统的CSS文件。bootstrap.reboot.css则仅做引导（初始化）文件使用。核心CSS文件包含了grid和reboot文件。
bootstrap.js是Bootstrap提供的核心JS文件，而bootstrap.bundle.js与bootstrap.js相比，新增了Pooper.js，根据需要选择你需要的JS文件即可。pooper.js主要用于元素定位，详情可以查看https://popper.js.org/。
2，文件引入
你可以通过两种方式引入bootstrap框架，本地和CDN。
CSS引入如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 为了实现移动设备优先，你应该有以上meta标签 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
JS引入：
1 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
2 <!-- bootstrap依然基于jQuery，并不是像前两年网上有些人吹的那样，bootstrap将放弃jQuery。所以你必须优先引入jQuery -->
3 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
4 <!-- popper.js单独引入 -->
5 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
6 <!-- bootstrap.js单独引入 -->
3，初始化CSS
Bootstrap尽量使用rem为单位，以获得不同尺寸屏幕上都能够获得更好的显示比例。
Bootstrap移除了大多数元素的margin-top属性，减少margin折叠（塌陷）。
Bootstrap把所有元素的box-sizing属性都设置为border-box，防止padding和border使盒子变形。
Bootstrap把html元素的font-size重置为16px，body设置为1rem，其他元素尽量使用inherit值继承font-size属性。
Bootstrap把标题的margin-bottom重置为0.5rem，段落的margin-bottom重置为1rem。
Bootstrap使用用户系统自带的字体，而不是硬性规定。
4，浏览器兼容性
Bootstrap支持所有主流浏览器的较新版，包括使用WebKit，Blink或Gecko内核的第三方浏览器（比如360，世界之窗，QQ浏览器等）。
对于IE浏览器，很遗憾，官方推荐使用IE10及之后的版本。如果你希望在IE10以前的版本上运行Bootstrap开发的网页或应用，那么你可能需要使用Bootstrap 3.x或以前版本。
二 栅格系统
Bootstratp把网页划分成一个个网格，每一行有12列，根据需要可以设置多行。在一行中，通过flex布局实现每一列占用的空间自适应。通过Bootstrap提供的栅格系统，我们可以轻松满足各种形状和尺寸的布局。
1，启用栅格系统
Bootstrap通过.container或.container-fluid类启用bootstrap的栅格系统，该类通常添加在第一祖先元素上，理论上.container可以相互嵌套，但不建议这么做。.container设置元素左右有固定的15px padding，左右自适应margin，从而居中显示元素。
1 <div class="container"></div>
2 <!-- 启用栅格系统就这么简单 -->
与之对应的.container-fluid类则使用100%，尽量占满其父元素内的可用宽度，用的较少。
1 <div class="container-fluid"></div>
2，行与列
Bootstrap通过.row来新增一行，.row采用最新的flex布局。同一行中你可以添加最多12列，.col-*表示一列，每一列在水平方向上都有30px padding，并且都使用百分比定义宽度，所以它们总是流式的呈现，并随父元素宽度的变化而变化。
1 <div class="container">
2 <div class="row">
3 <div class="col-*"></div>
4 </div>
5 </div>
请注意，在栅格系统中，只有.col-*是合法的.row的直接子元素，.row的直接子元素不能是其他任何内容，否则可能会破坏整个栅格系统，带来意想不到的结果。
你可以直接用1 -- 12 的数字代替.col-*后面的星号，表示希望该列占用的宽度。如果你想让每一列均分宽度，你可以直接设置.col，或设置相同的数字（12除以列数）。
1 <div class="container">
2 <div class="row">
3 <div class="col-8">我大概占66.7%</div>
4 <div class="col-4">我大概占33.3%</div>
5 </div>
6 </div>
如果每一行中列的数字之和大于12，那么超出的部分将换行，你虽然可以在换行的位置插入一个.w-100实现多行，但我们不建议这样做。如果确实需要换行，建议新增一个.row。
1 <div class="row">
2 <div class="col-8">col</div>
3 <div class="w-100"></div>
4 <div class="col-8">col</div>
5 </div>
3，屏幕断点
Bootstrap为了适应不同尺寸的屏幕，利用CSS媒体查询功能，对不同尺寸的屏幕做了断点设置。其中前缀xl代表超大屏幕（大屏），lg代表大屏幕（普通显示器），md代表中等屏幕（较小显示器），sm代表小屏幕（pad），无前缀则代表超小屏幕（手机）。
| 超小屏幕 (新增规格)<576px |
小屏幕 次小屏≥576px |
中等屏幕 窄屏≥768px |
大屏幕 桌面显示器≥992px |
超大屏幕 大桌面显示器≥1200px |
|
|---|---|---|---|---|---|
.container 最大宽度 |
None (auto) | 540px | 720px | 960px | 1140px |
| 类前缀 | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
bootstrap断点的特点是：如果把列的宽度设置在某一断点上，那么屏幕宽度大于或等于该断点值的设备都会被应用该设置，而小于该断点值的设备将不会被应用。根据这个特点，我们可以只定义一个屏幕尺寸，即可以向上覆盖所有尺寸的设备。
1 <div class="row">
2 <div class="col">col</div>
3 <div class="col">col</div>
4 </div>
5 <div class="row">
6 <div class="col-8">col-8</div>
7 <div class="col-4">col-4</div>
8 </div>
4，混合使用屏幕断点
如果你想让同一个网页在不同尺寸的设备上有不同的表现，那么你可以混合使用bootstrap的屏幕断点。
1 <div class="row">
2 <div class="col-12 col-md-8"></div>
3 <div class="col-6 col-md-4"></div>
4 <!-- 在超小屏幕上一列全宽，一列半宽，其他尺寸则以8：4的比例呈现 -->
5 </div>
5，对齐
在.row行上使用.align-items-*可以方便的控制行在容器内的垂直方向上的对齐方式。在.col-*列上使用.align-self-*控制列在水平方向上的对齐方式。
1 <div class="container">
2 <div class="row align-items-start">
3 <div class="col align-self-start">
4 第一列
5 </div>
6 <div class="col align-self-center">
7 第二列
8 </div>
9 <div class="col align-self-end">
10 第三列
11 </div>
12 </div>
13 <!-- align-items-start：上对齐；align-items-center：中对齐；align-items-end：下对齐 -->
14 <!-- align-self-start：左对齐；align-self-center：居中对齐；align-self-end：右对齐>
由于Bootstrap栅格系统基于flex实现，所以你还可以在.row行上使用justify-content-*来规定.col-*列在水平方向上的对齐方式（justify-content实际是flex布局中使用的属性，用来规定内容块在主轴方向的分布）。flex布局请戳这里《CSS定位与布局》4.4。
1 <div class="container">
2 <div class="row justify-content-start">
3 <div class="row justify-content-center">
4 <div class="row justify-content-end">
5 <div class="row justify-content-around">
6 <div class="row justify-content-between">
7 </div>
8 <!-- 他们依次表示左对齐，居中，右对齐，内容块间隔相等，两端对齐 -->
6，清除间隙
我们知道，bootstrap的行和列水平方向上都有30px的padding值，如果你不希望它存在，bootstrap提供了.no-gutters类。
1 <div class="container no-gutters">
2 <div class="row">
3 <div class="col"></div>
4 </div>
5 </div>
6 <!-- 放在.container上清楚行和列的padding，放在.row上则只清楚列的padding -->
7，列的重排序
默认状况下，列会根据代码编写顺序依次呈现，基于flex，bootstrap提供了.order-*来自定义显示顺序，星号可以是1 -- 12的数字，数字越小，显示优先级越高。
1 <div class="container">
2 <div class="row">
3 <div class="col">
4 未定义序号，位置不变。
5 </div>
6 <div class="col order-12">
7 12号排最后。
8 </div>
9 <div class="col order-1">
10 1号排在12号之前
11 </div>
12 </div>
13 </div>
14 <!-- 重排序的元素只能在他们之间确立优先级，而不能影响为重排序的元素 -->
如果你临时起意，在行的末尾新增了一列，又想让它优先显示，那么你可以使用.order-first。
三 CSS基础样式
Bootstrap初始化了很多CSS样式，使我们拥有了一个简洁的、优雅的页面基础。基本的HTML元素均通过添加class设置样式并得到增强效果；还有先进的栅格系统用于页面布局。
1，标题和段落
Bootstrap重新定义了基本的全局显示、排版、以及链接样式。
首先是标题，你可以直接使用新的h1 -- h6标签，或给标题标签设置.display-1 -- .display-4类，以获取更大的显示效果。也可以使用.h1 -- .h6 class属性呈现标题样式。当然，那样并不符合web语义化规范。
1 <h1 class="display-2">
2 我是 bootstrap h1
3 <small class="text-muted">我是副标题</small>
4 </h1>
5 <p class="h1">我是拥有bootstrap h1 样式的p</p>
你还可以通过small标签来添加副标题，通过添加.text-muted类让副标题的颜色更浅一点。
其次是段落，你可以通过.lead样式来突出显示部分内容。.text-right或。text-center设置文本右对齐或居中。.text-truncate可以在文本容器宽度不足时显示省略号。
1 <p class="lead text-right text-truncate">我很重要我很重要。。。（很多内容）</p>
对footer使用.blockquote-footer来获得更好的引用备注效果。
1 <blockquote class="blockquote">
2 <p>爱上一个地方，就应该背上包去旅游，走得更远。</p>
3 <footer class="blockquote-footer">出自商务印书馆的 <cite title="Source Title">《新华字典》</cite></footer>
4 </blockquote>
.list-inline清除列表样式和左边距，.list-inline-item则把列表元素设置为行类块级元素。配合使用可以使列表横向展示。
1 <ul class="list-inline">
2 <li class="list-inline-item">列表一</li>
3 <li class="list-inline-item">列表二</li>
4 <li class="list-inline-item">列表三</li>
5 </ul>
2，图片和表格
Bootstrap通过.img-fluid实现图片响应式特征，图片大小会随着父元素大小同步缩放。使用.img-thumbnail装饰图片，实现缩略图效果，实际就是加了个边框和一点padding。
1 <img src="url" alt="..." class=" img-fluid img-thumbnail">
Bootstrap通过.table重新定义了表格的基本样式，你可以通过.table-dark来实现表格背景和文字颜色的反转效果。通过.table-striped实现条纹状表格。
1 <table class="table table-dark table-striped">
2 </table>
如果只是想对表头做一些改变，那么你可以使用.thead-light或.thead-dark让表头背景呈现浅黑色或深灰色。
1 <table class="table">
2 <thead class="thead-linght">
3 </thead>
4 </table>
另外，你还可以通过.table-bordered或.table-borderless来设置或取消表格的边框。通过.table-hover产生鼠标悬停效果。
1 1 <table class="table table-bordered table-hover">
2 2 </table>
3，文本
使用text-*的方式规定文本对齐方式，星号的取值可以是任意text-align属性的可选值。另外，你还可以通过text-sm-*、text-lg-*等来创建响应式的字体对齐方式。
1 <p class="text-right">右对齐</p>
2 <p class="text-sm-left">在sm及以上的屏幕显示为左对齐</p>
另外，你可以在文本上应用的样式有：.text-wrap（可换行），.text-nowrap（不可换行），.text-truncate（超出文本显示省略号），.text-lowercase（转换为小写），.text-uppercase（转换为大写），.text-capitalize（单词首字大写），.text-decoration-none（清楚装饰）等等。
4，颜色
Bootstrap通过主题颜色来传达一些信息，包括元素的不同状态。
1 <p><a href="#" class="text-primary">重要的</a></p>
2 <p><a href="#" class="text-secondary">次要的</a></p>
3 <p><a href="#" class="text-success">成功的</a></p>
4 <p><a href="#" class="text-danger">危险的</a></p>
5 <p><a href="#" class="text-warning">警告的</a></p>
6 <p><a href="#" class="text-info">信号的</a></p>
7 <p><a href="#" class="text-light bg-dark">高亮的</a></p>
8 <p><a href="#" class="text-dark">暗沉的</a></p>
9 <p><a href="#" class="text-muted">暗淡的</a></p>
10 <p><a href="#" class="text-white bg-dark">白色的</a></p>
同样的，背景颜色也是类似的通过主题颜色在不同的场景传递不同的信息。不过背景颜色是通过bg-*d的方式。
5，显示模式
Bootstrap通过.d-*的方式制定元素显示模式。通过.d-none隐藏元素。
1 <div class="d-inline">我变成行内元素了</div>
2 <div class="d-none">我被隐藏了</div>
3 <!-- 星号的取值可以是：inline，inline-block，block，table，table-cell，table-row，flex，inline-flex -->
同时你也可以指定响应式的显示模式。
1 <div class=".d-sm-none .d-md-block">在sm屏幕上隐藏，其他的都显示</div>
2 <div class=".d-block .d-sm-none">只在xs屏幕上可见</div>
6，浮动与清除
Bootstrap通过.float-*来设置元素浮动，你当然也可以通过.float-*-*来指定响应式的浮动规则。
1 <div class="float-sm-left">在sm屏幕上左浮动</div><br>
2 <div class="float-md-left">在md屏幕上左浮动</div>
清楚浮动bootstrap只提供了一种方式.clearfix：通过伪元素实现清除浮动。
1 <div class="clearfix">
2 <div class="float-left">左浮动</div>
3 </div>
四 功能组件
Bootstrap提供了无数可以复用的组件，包括字体图标、下拉菜单、导航、警告条、弹出框等更多功能。
1，警告提示
警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供常见的上下反馈消息和提示。首先你应该指定元素的.alert类，然后再根据警报种类（主题）选择合适的颜色控件。
1 <div class="alert alert-primary"></div>
2 <div class="alert alert-secondary"></div>
3 <div class="alert alert-success"></div>
4 <div class="alert alert-danger"></div>
5 <div class="alert alert-warning"></div>
6 <div class="alert alert-info"></div>
7 <div class="alert alert-light"></div>
8 <div class="alert alert-dark"></div>
9 <!-- 警报实际上是一组颜色控件，共八种-->
2，标识
Bootstrap通过.badge来实现标识信息，标识也可以通过.badge-*来指出特定的主题信息。
1 <h1>用于标题<span class="badge badge-pramiry">New</span></h1>
2 <button>用于按钮 <span class="badge badge-secondary">2</span></button>
3 <a>用于链接<span class="badge badge-warning"></span></a>
你还可以通过.badge-pill获得更大的圆角，这会使元素看起来像椭圆形的。
3，痕迹导航
在通过BootStrap的内置CSS样式，自动添加分隔符、并呈现导航层次和网页结构结构，从而指示当前页面的位置为用户提供优秀用户体验。
1 <nav>
2 <ol class="breadcrumb">
3 <li class="breadcrumb-item"><a href="#">Home</a></li>
4 <li class="breadcrumb-item active" aria-current="page">Library</li>
5 </ol>
6 </nav>
7 <!-- 通过.breadcrumb设置导航栏， .breadcrumb-item设置子选项，.active设置当前活动选项-->
4，按钮
Bootstrap自定义了按钮样式，并广泛用于表单、对话框等场景中的操作，并支持多种大小和状态。Bootstrap包括多个预定义的按钮样式，每个样式都有自己的语义目的。
1 <button type="button" class="btn btn-primary">Primary</button>
2 <button type="button" class="btn btn-secondary">Secondary</button>
3 <button type="button" class="btn btn-success">Success</button>
4 <button type="button" class="btn btn-danger">Danger</button>
5 ...
<!-- 你也可以在input标签上应用这些样式 -->
如果你不喜欢带有背景颜色的按钮，你可以使用.btn-outline-*来构建轮廓按钮（只有一个带圆角的边框）。
1 <button type="button" class="btn btn-outline-primary">Primary</button>
2 <button type="button" class="btn btn-outline-secondary">Secondary</button>
3 <button type="button" class="btn btn-outline-success">Success</button>
4 <button type="button" class="btn btn-outline-danger">Danger</button>
5 ...
此外，你还可以通过.btn-lg、.btn-sm来创建更大或更小的按钮，disabled属性或.active类来定义按钮是禁用状态或启用状态。
5，下拉菜单
下拉菜单是网页开发经常永达ode一个组件，通过bootstrap即可轻松实现。
1 <div class="dropdown">
2 <button class="btn btn-success btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
3 下拉按钮
4 </button>
5 <div class="dropdown-menu">
6 <h6 class="dropdown-header">HTML</h6>
7 <a class="dropdown-item active" href="#">CSS</a>
8 <a class="dropdown-item" disabled href="#">JavaScript</a>
9 <div class="dropdown-divider"></div>
10 <a class="dropdown-item" href="#">其他</a>
11 </div>
12 </div>
通过.drop*创建一个下拉菜单，*是一个方位名词，可以是top，down，left，right其中一个，表示菜单将出现在什么方位。按钮上你可以通过.btn-*来设置按钮大小、主题颜色等，dropdown-toggle生成一个三角形小图标。使用下拉菜单时，data-toggle="dropdown"是必须的属性。
通过.dropdown-menu设置菜单，.dropdown-header设置菜单标题，.dropdown-item设置菜单项，.dropdown-divider创建分割线。
6，进度条
Bootstrap进度条没有使用HTML5的<progress>实现，而是通过两个div和一些类实现。
1 <div class="progress">
2 <div class="progress-bar progress-bar-striped" style="20%">20%</div>
3 </div>
通过.progress创建进度条的底，.progress-bar表示当前进度，style设置当前进度值。你还可以通过。.progress-bar-striped给当前进度添加条纹样式，如果你在当前进度div中添加了文本，那么它将展示在进度条上。
如果你不需要这些复杂的玩意儿，那么使用HTML5的<progress>标签或许才是更好的选择。
8，加载特效
bootstrap实现了两种加载特效，圆形旋转和圆形渐变气泡。
1 <div class="spinner-border spinner-border-lg text-success" role="status">
2 <span class="sr-only">Loading...</span>
3 </div>
4 <button>
5 <div class="spinner-grow spinner-grow-sm text-danger" role="status">
6 <span class="sr-only"></span>
7 </div>
8 loading...
9 </button>
圆形旋转特效通过.spinner-border创建边框和动画效果，.spinner-border-*设置大小，.text-*设置主题颜色。
圆形渐变气泡通过spinner-grow创建，其余和旋转一样。
9，其他
更多可复用的组件，由于篇幅有限，请查看官方文档。
五 Jquery插件
Bootstrap自带了许多jQuery插件，这极大的丰富了bootstrap的功能，所以如果你需要用到这些插件，并不需要额外的代码，直接引入bootstrap.min.js即可。
Bootstrap许多插件都可以通过HTML标签的data-*属性触发，这也应该是你首选的方式。另外，Bootstrap也提供了仅使用JavaScript（实际是通过jQuery）来使用插件的方式。
虽然Bootstrap提供了许多JS插件和CSS组件，但实际工作中可能用的并不多，个人认为Bootstrap的核心和优势完全在于其栅格系统，其他的作简单了解即可。
写在最后：一般，公司开发不太可能只依赖Bootstrap或其他某一单一库或框架，即使它功能非常强大。实际开发过程中，遇到的可能UI，数据，交互等都采用更有针对性的库或框架，稍有实力的公司甚至有自己内部开发的专用框架。所以，很遗憾，这里没有继续讲解更多关于bootstrap组件库的信息。如果你确实有兴趣或正在使用，请移步Bootstrap中文网继续学习。