Boot栅格布局快速应用

栅格布局

布局方式分析

table	div+css	boot栅格
简单易控	语义正确，渲染效率高	简单易控制，语义正确，渲染效率高，支持响应式
语义错误，渲染效率低	控制繁琐	复杂界面不适合使用

可以看到，boot栅格布局在制作普通页面时具有不可代替的优势

栅格布局的使用方法

栅格布局简单来讲，是将页面以行列的形式分开，横向分为12列，行为父级包含row类的div，列为包含col-x1-x2的子div。

子div中的基本类col-x1-x2，其中x1为lg/md/sm/xl，用来设置响样式对应的屏幕大小，达到响应式布局的效果，x2为1-12，用来设置子级div所占列的宽度，为浏览器设备大小的1/12的x2倍，如col-lg-4，即该子div在大屏中占页面宽度的1/3。

例：

<div class="container/container-fluid">
<div class="row">
	<div class="col-lg-3 col-md-4 col-sm-12">我们在大屏时按1：2：1比例显示</div>
	<div class="col-lg-6 col-md-8 col-sm-12">我们在中屏幕时按1：2比例显示</div>
	<div class="col-lg-3 col-md-12 col-sm-12">我在中屏时折行，独占一行，我们在小屏时全部折行显示</div>
</div>
</div>

当子div所占比例在不同屏幕下固定时。可省略x1，此时格式为col-x2，则任何页面大小此div所占比例不变。
当省略x2时候平均分配row类父级div的宽度。如row中有三个子级div，则各占三分之一。

列偏移

offset-sm/md/lg/xl-1/2/3/4/5/6/7/8/9/10/11

列偏移可以改变子级div位置，其本质是为div增添左外边距，增添宽度为页面宽度1/12的1到11倍数

注意事项

1. 栅格布局中，父级基本类row的本质是flex+warp，主轴是x，故可以通过设置对应的flex替代
2. 栅格布局需要放在boot容器中使用，即类为container或container-fluid的div。
3. row类自带-15px外边距，如有需要可通过设置m-0类进行消除。
4. col类自带+15px内边距，如有需要可通过设置p-0类进行消除。
5. boot中的响应式向上兼容，如设置md样式，未设置lg样式，则lg样式默认与md相同，同理如只设置sm样式，则lg/md样式与sm样式相同。
6. 可通过d-sm/md/lg/xl-none类，在特定屏幕下隐藏元素，如d-md-none，即为在中屏下元素隐藏，值得注意的是由于boot中的响应式向上兼容，当如此设置时大屏也将隐藏元素，此时在大屏中如果需要显示元素，应设置d-lg-block类显示元素，d系列类实际上是对display属性的操作。