了解一下Bootstrap让我们打开他看一下。其中有一个bootstrap.css和bootstrap.min.css

首先将Bootstrap下载下来，解压后发现里面有三个文件，

让我们打开他看一下。

其中有一个bootstrap.css和bootstrap.min.css，这是他的源码，而后者将其中缩进所用的空格/回车等全部省略掉，因此内存占用变小了。再来看看js目录下的文件，

同样的前两文件是源码，第二个同样比第一个文件占内存要小很多，主要是将长变量名改为短变量名和将缩进用的空格/回车等删除。因此在生产环境中建议使用min版本来提高加载速度。

源代码中上来就检查jQuery，因为bootstrap对jQuery是强依赖的，所以要下载jQuery并在引入bs之前引入。

Bootstrap 是移动设备优先的，为了确保适当的绘制和触屏缩放，需要在 head 之中添加 viewport 元数据标签。写法如下

<meta name="viewport" content="width=device-width, initial-scale=1">

或者是

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

下面这种不允许用户进行缩放，更具自己的需要进行选择。

布局容器

bootstrap有布局容器的概念，用于盛放内容。bootstrap提供了为此提供了两个类，但是不能不能互相嵌套。用法如下：

<div class="container">
  ...
</div>

一般用于PC页面

<div class="container-fluid">
  ...
</div>

一般用于移动端。

栅格系统

不多说，先把官方文档的代码复制进我们的网页，看看什么效果。代码如下：

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

为了方便观察，给他加个border看看。

很明显div的class="row"为我们规定了一行，一行的宽度被等分为12份，通过设置类 col-md-num来确定它的宽度（num为1-12的数字）。如果你写的”宽度“和小于12，想让中间空出来那么可以用.col-md-offset-num来设置列偏移(num为0-12的数字，至于超出会怎么样，自己试试吧~)。
在拖动页面的时候发现页面是响应式的，那么是如何做到的呢？

答案当然是媒体查询啦~经过阅读文档，发现这三个媒体查询对应额一次是 md/sm/xs。那么如何使用呢？

<div class="col-lg-4 col-md-6 col-sm-3 col-xs-1">哈哈哈</div>

如代码所示，在不同的三个条件下会设置对应的布局哦~屏幕宽度在1200px及以上用lg，屏幕宽度大于等于992px时用md，大于等于768px时用sm，再小就用xs啦。
至于其他组件可以到文档中进行查看和尝试。

再来看看组件

<button type="button" class="btn btn-default" aria-label="Left Align">
    <span class="glyphicon glyphicon-text-color" aria-hidden="true"></span>
</button>

生成了这么一个东西，要想改按键中的样式，可以从这里找想要的样子，覆盖掉span的原有类名即可。其他组件使用大同小异，使用时复制文档中的代码尝试后更改即可。