使用Bootstrap响应式布局首先需要在head标签里面添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
width=device-width 宽度是设备屏幕的宽度
initial-scale=1.0 初始的缩放比例
maximum-scale=1 最大的缩放比例
user-scalable=yes 用户是否可以调整缩放比例
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
1丶.row必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
2丶通过.row在水平方向创建一组“列（column）”
3丶栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
4丶如果一.row中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
Bootstrap栅格系统在不同屏幕上的说明 (栅格类适用于与屏幕宽度大于或等于分界点大小的设备)
例:手机端显示一列,PC端显示3列
<div class="row">
<div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
<div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
<div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
<div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
<div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
<div class="col-xs-12 col-md-4 col-sm-4">Bootstrap</div>
</div>