之前，我很少做响应式的页面，新到的这家公司需要把官网的静态页面做成自适应移动端和PC端。如果想快速布局的话，bootstrap无意是一个比较好的选择。

bootstrap是一个对移动端非常友好的UI框架，它的原理是把屏幕的宽度分成12个等分大小的栅格，bootstrap会查询当前屏幕的宽度，然后根据你定义的栅格数量来渲染页面。

bootstrap把屏幕的大小分为4个区间，col-xs-*、col-sm-*、col-md-*、col-lg-*，分别代表超小屏幕（<768px），小屏幕（768px-991px），中等屏幕（992px-1199px），大屏幕（>=1200px）。假如说，你要显示一块内容，它在超小屏幕和小屏幕占12份，在中屏和大屏占6份，那么就是这样写：

<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"></div>

我们把列定好了，接下来我们需要定义行。记住列的外层一定要包裹行的样式，否则会出问题的。

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"></div>
</div>

class="row"中定义了margin-left: -15px margin-right: -15px，所以这时候的内容是往外凸的。这里我就遇到过一个坑，我的内容是一张背景图片，然后我按上面的方式设置属性，结果出现了一条横向的滚动条，当时左思右想都觉得图片的最大宽度为100%，不会超出当前屏幕的大小。后来才知道是那两个负边距值搞得鬼，它向外凸了之后，图片的宽度就大于当前屏幕的宽度，所以就产生了滚动条。

所以，在class="row"的外层还需要包裹一个class，

<div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6"></div>
    </div>
</div>

class="container"中定义了padding-left: 15px padding-right: 15px，刚好可以与class="row"中的margin-left: -15px margin-right: -15px抵消，所以就完美地解决了这个问题。

这3层的嵌套关系是每个页面都必须的。

为了更好地完成响应式布局，bootstrap还定义了显示、隐藏的类，很符合开发者的需求，它可以有这样的应用场景——大屏幕中的有些修饰性的东西可以在小屏幕隐藏掉，这样可以让移动端的用户体验更好。

这个问题我也掉过一个坑，我想在超小屏幕中隐藏掉某个东西，我用了这样的col-xs-0类，但在bootstrap中不存在0个栅格，结果当然就不会生效。

bootstrap定义的组件也非常好用，这里就不具体讲他们的用法了，因为我觉得栅格系统才是bootstrap最基础、最重要的内容。