bootstrap响应式

响应式原理

• 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的

设备的划分

• 小于768的为超小屏幕（手机）
• 768~992之间的为小屏设备（平板）
• 992~1200的中等屏幕（桌面显示器）
• 大于1200的宽屏设备（大桌面显示器）

bootstrap容器

container

容器	固定宽度
大屏 ( >=1200px)	1170px
中屏 ( >=992px)	970px
小屏 ( >=768px)	750px
超小屏 (100%)

container-fluid

• 流式布局容器 百分百宽度
• 占据全部视口（viewport）的容器。

bootstrap栅格系统

• 按照不同屏幕划分为1~12 等份
• 行（row） 可以去除父容器作用15px的边距
• xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
• 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的 padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”

嵌套

<div class="col-md-4">
    <div class="row">
         <div class="col-md-6">one</div>
         <div class="col-md-6">two</div>
    </div>
</div>

偏移

• 使用 .col-md-offset-*类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

<div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
 </div>

排序

• 通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

<div class="row">
      <div class="col-lg-4 col-lg-push-8">left</div>
      <div class="col-lg-8 col-lg-pull-4">right</div>
</div>

响应式工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

修改container宽度示例

@media (min-width: 1280px) { 
    .container { 
		width: 1280px; 
    } 
}