开发者学堂课程【前端开发框架Bootstrap使用教程：05_Bootstrap全局css样式_栅格2】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/360/detail/4224
05_Bootstrap全局css样式_栅格2
一、只摆放三个div操作
（1）写法：只留三个
<div class="col-md- 1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<qiv class="col-md-1">.col-md-1</div>
内容1改为4
只有两个 一个占四份一个占八份
写法：继续删掉一个div
<div class="col- md-4">●col- md-4</div>
<div class="col-md-8"> .col-md-8</div>
（2）在手机端进行等分展示
输入col-xs-6 （xs手机端内名）
<div class="coL- md-4 col-xs-6"> .col- md-4</div>
<div class="col-md-8 col-xs-6"> .col-md-8</div>
执行之前添加一个执行设备
输入：
<meta name="vi ewport" content= "wi dth=device-width, initial-scale=1">
打开移动端模拟器打开手机可以正常显示
不同设备展示不同效果
Xs代表手机 sm代表电脑 md代表桌面
操作
输入<div class="coL- md-4 col-sm-5 col-xs-6"> . col- md-4</div>
<div class="col- md-8
col-sm-7 col-xs-6"> .col-md-8</div> 即可
二、形状
（1）如果重复添加col-md-4会增加高度
（2）列偏移
使用.col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用*选择器为当前元素增加了左侧的边
( margin)。例如，.col-md-offset-4 类将.col -md-4元素向右侧偏移了4个列( column )的宽度。
（3）嵌套列
为了使用内置的栅格系统将内容再次嵌套,可以通过添加一一个新的.row 元素和一系列.co1-sm-* 元素到已经存在的
.col-sm-*元素内。被嵌套的行( row )所包含的列( column )的个数不能超过12 (其实,没有要求你必须占满12
（4）列排顺序
通过使用.col-md-push-* 和.col-md-pul1-* 类就可以很容易的改变列( column )的顺序。
<div class=" row">
<div class="col-md-9 col-md-push-3">.col-md-9 。 col-md- push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pul1-9</div>
</div>
前三后久的效果
