栅格系统

**

meta 移动端优先的写法

**

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

width=device-width 这是告诉宽度为浏览设备的宽度
initial-scale=1 初始化为100%，就是一打开，文字就很大，不用双击变大文字
user-scalable=no 这是紧致用户缩放

这个meta标签也可以写为

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

**

栅格系统

**
注意：
1，栅格系统必须写在容器内；这里有两个容器类型
<div class="container"></div> 这是固定宽度，一般是1170px
<div class="container-fluid"></div> 这个宽度是100%

栅格系统划分：一行最多划分为12个单元格

下面的表格是，不同的设备使用什么样的类

.col-xs- 手机
.col-sm- 平板
.col-md- 中型pc电脑屏幕
.col-lg- 大型pc电脑屏幕

如果我们想在pc最大屏幕上，一行显示4列，在pc中等屏幕上，一行显示3列，在平板和手机屏幕上，一行显示2列，该如何写？

**

列偏移offset(只能向右偏移)

**

**

交换位置（push 和pull）

**

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>   右移3个单元格
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>    左移9个单元格
</div>