@H_4030@Bootstrap之栅格系统

@H4030@Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统。

@H4030@

一. 移动设备优先

@H4030@所谓移动设备优先，重要的是屏幕，不是设备。

@H403_0@移动设备优先就是说起初样式是在移动设备写的，然后写到sm尺寸的时候样式得改变了，于是就加media screen max-width >=768， 再写sm的样式，这样尺寸递进就完成了所有的媒体查询，由于不加media query的样式是在最小尺寸，也就是移动设备上写的，所以叫做移动设备优先。

@H_403_0@移动设备优先有一份非常重要的 Meta，用于设置屏幕和设备等宽以及是否运行用户缩放，及缩放比例的问题。

@H_403_0@<span style="color: #800000">//分别为：屏幕宽度和设备一致、初始缩放比例、最大缩放比例和禁止用户缩放

@H_403_0@<span style="color: #800000"><Meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

@H_403_0@

二. 栅格系统

@H_403_0@1. 布局容器

@H_403_0@Bootstrap 需要为页面内容和栅格系统包裹一个.container容器。由于 padding等属性的原因，这两种容器类不能相互嵌套。

//100%宽度
<div class="container-fluid">