Bootstrap结合代码学习Bootstrap3栅格系统

　　开篇的话：
　　大家可能会好奇，技术的滚轮滚滚向前，这个时候怎么还会有博文在介绍Bootstrap3呢？
　　技术没有好坏之分，只有适合和不适合的区别，因为我们这个项目对IE有明确的要求，所以Bootstrap3相对来说更适合，栅格系统又是我认为的Bootstrap的精髓，所以呢，我们就开始今天的博文吧～
　　简介
　　Bootstrap中的栅格系统就是通过一系列的行（row）与列（column）的组合创建页面布局。
　　要使用栅格系统，就要遵循以下规则：
　　1、数据行（。row）必须包含在容器。container或。containerfluid中
　　2、列（。column）必须放在数据行（。row）中
　　3、页面内容应当放置在列容器（。column）之内
　　4、列与列之间设置了15px的内距（padding）。colxs1，。colsm1，。colmd1，。collg1，。colxs2，。colsm2，。colmd2，。collg2，。colxs3，。colsm3，。colmd3，。collg3，。colxs4，。colsm4，。colmd4，。collg4，。colxs5，。colsm5，。colmd5，。collg5，。colxs6，。colsm6，。colmd6，。collg6，。colxs7，。colsm7，。colmd7，。collg7，。colxs8，。colsm8，。colmd8，。collg8，。colxs9，。colsm9，。colmd9，。collg9，。colxs10，。colsm10，。colmd10，。collg10，。colxs11，。colsm11，。colmd11，。collg11，。colxs12，。colsm12，。colmd12，。collg12｛position：relative；minheight：1px；paddingright：15px；paddingleft：15px；｝
　　在Bootstrap4中添加了一个槽宽（Gutters）的概念，可以用nogutters类来添加一个无内边距的列
　　nogutter实现代码如下：。nogutters｛marginright：0；marginleft：0；｝。nogutters。col，。nogutters〔classcol〕｛paddingright：0；paddingleft：0；｝
　　把nogutters添加到row上就可以创建一个没有边距的列了，当然以下代码同时也展示了一个8列的栅格系统：栅格参数
　　Bootstrap3栅格参数把屏幕分成了四类（超小屏，小屏，中屏和大屏），分界点为768px、992px和1220px
　　把小屏幕和超小屏幕分界点定在768px已经不满足现在的需求了，所以在bootstrap4中进行了优化，增加了576px这一个档位。
　　假设我们以bootstrap4的分隔节点重构Bootstrap3，那么我们只需要保持xs这一档位不变，加上576px这一段媒体查询media（minwidth：576px）｛。colsm｛加上小屏代码｝｝
　　以前我们colxs则要改成colsm
　　以前我们colsm则要改成colmd
　　以前我们colmd则要改成collg
　　以前我们collg则要改成colxl
　　也就是前缀依次向后挪一位就可以了，这样改造过后的bootstrap3在不同分辨率上的表现会更加合理些。
　　列的实现原理（以Bootstrap3为例）
　　我们以。colxs为例，其他的除了前缀不一样外，其原理都是完全一样的。。colxs1，。colxs2，。colxs3，。colxs4，。colxs5，。colxs6，。colxs7，。colxs8，。colxs9，。colxs10，。colxs11，。colxs12｛float：left；｝。colxs12｛width：100；｝。colxs11｛width：91。66666667；｝。colxs10｛width：83。33333333；｝。colxs9｛width：75；｝。colxs8｛width：66。66666667；｝。colxs7｛width：58。33333333；｝。colxs6｛width：50；｝。colxs5｛width：41。66666667；｝。colxs4｛width：33。33333333；｝。colxs3｛width：25；｝。colxs2｛width：16。66666667；｝。colxs1｛width：8。33333333；｝
　　1、column采用百分比布局，默认为12列
　　colxs12就占100，11列就占1112（91。66666667），10列就为56（83。33333333）以此类推
　　2、所有的列都是左浮动
　　所以bootstrap用了以下代码清除浮动。containerfluid：before，。containerfluid：after，。row：before，。row：after｛display：table；content：；｝。container：after，。containerfluid：after，。row：after｛clear：both；｝列偏移
　　有时候，我们不希望相邻的两个内容列之间有空隙，又或者我们想要某个列居中，这个时候就可以用到列偏移。
　　先看源码：。colxsoffset12｛marginleft：100；｝。colxsoffset11｛marginleft：91。66666667；｝。colxsoffset10｛marginleft：83。33333333；｝。colxsoffset9｛marginleft：75；｝。colxsoffset8｛marginleft：66。66666667；｝。colxsoffset7｛marginleft：58。33333333；｝。colxsoffset6｛marginleft：50；｝。colxsoffset5｛marginleft：41。66666667；｝。colxsoffset4｛marginleft：33。33333333；｝。colxsoffset3｛marginleft：25；｝。colxsoffset2｛marginleft：16。66666667；｝。colxsoffset1｛marginleft：8。33333333；｝。colxsoffset0｛marginleft：0；｝
　　翻看源码我们发现列偏移其实也不神奇，coloffset就是运用marginleft把列往右移，相当于左侧补列。
　　比如说我们有个内容列在中等屏幕下占8列，并且居中，我们就可以用以下代码实现内容
　　colmd8保证了我们在中屏幕下内容列始终占屏幕66。7，colmdoffset2保证了我们在这个内容列始终有16。7左边距，这样就保证内容列的居中。
　　ps：
　　使用了colxsoffset在超小屏幕上偏移了列，要使用colsmoffset0（具体以你的代码为准）把列偏移回来，这样才可以在超小屏幕上实现偏移并且不会影响到更大的屏幕
　　pps：
　　还有个小细节很容易被忽略，在bootstrap中，默认设定了元素的现实方式为boxsizing：borderbox，这样才能保证默认每个列上15px的边距在百分比下布局不出滚动条不换行。｛webkitboxsizing：borderbox；mozboxsizing：borderbox；boxsizing：borderbox；｝：before，：after｛webkitboxsizing：borderbox；mozboxsizing：borderbox；boxsizing：borderbox；｝boxsizing
　　这里再花一分钟简单说下boxsizing，假如说页面上有一个id为box1的元素box1｛width：200px；height：200px；border：8pxsolidred；padding：20px；boxsizing：borderbox；｝
　　boxsizing：borderbox；
　　则元素实际宽高为144px，实际占用宽度为14420282，总宽度还是200px
　　boxsizing：contentbox；
　　元素实际宽高为200px，实际占用的宽度为20020282256px