1. 下载
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
那怎么使用呢？进入BootStrap官网，点击下载
选择处于生产环境的Bootstrap进行下载，第二个Bootstrap源码是没有解压过的。
下载后进行解压，引入css代码。可以引入bootstrap.min.css，或者bootstrap.css。
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
现在我们就可以使用CSS样式了
2. 使用
布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container容器。
.container类用于固定宽度并支持响应式布局的容器（类似于版心类）。.container-fluid类用于 100% 宽度，占据全部视口（viewport）的容器。
<body>
<div class="container">1</div>
<div class="container-fluid">2</div>
</body>
注意观察，container和.container-fluid存在15px的左右内间距
如何消除呢？需要使用row。
<!-- row类作用就是抵消container类的15px的内边距, row有-15px的外边距 -->
<div class="container">
<div class="row">2</div>
</div>
显式内容已经靠边
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
在多种屏幕设备上，Bootstrap 的栅格系统按如下工作：
不了解？举个例子!
- 在大屏幕时，我们在每个div中存在类名
col-lg-3，也就是占12栅格里面的3份，那么4个盒子都能排在一行（3 x 4 = 12）。 - 如果屏幕宽度为中等屏幕，一个div占6份，就是两个盒子排一行，一共两行。
- 同理，当屏幕宽度为小屏幕时，盒子的宽度占12个，那么就是一个盒子一行。
<body>
<!-- 需求:
大屏: 一行排列4个内容;
中屏:一行排列2个内容
小屏幕：一行一个 -->
<div class="container">
<div class="col-lg-3 col-md-6 col-sm-12">1</div>
<div class="col-lg-3 col-md-6 col-sm-12">2</div>
<div class="col-lg-3 col-md-6 col-sm-12">3</div>
<div class="col-lg-3 col-md-6 col-sm-12">4</div>
</div>
</body>
全局 CSS 样式
使用Bootstrap的样式，实际上就是使用封装好的类名。我们只需要在我们想要使用的盒子调用全局CSS样式的类名就可以达到相同的效果。
比如这里，我想使用表格样式。在引入Bootstrap则直接复制下面的代码就可以
然后添加 .table-bordered类为表格和其中的每个单元格增加边框，添加 .table-hover类可以让表格中的每一行对鼠标悬停状态作出响应（这些类名官网都有）。
<body>
<table class="table table-bordered table-hover">
<tr>
<th>数字1</th>
<th>数字2</th>
<th>数字3</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
显示如下（鼠标悬停在了第二行）：
剩下的内容，大家可以根据官网文档找自己想要的CSS样式、组件！！！
但是注意，如果要使用JavaScript插件，需要引入jQuery.js和Bootstrap.min.js。需要注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入！！！
<script src="./js/jquery.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
