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

　　开篇的话：
　　大家可能会好奇，技术的滚轮滚滚向前，这个时候怎么还会有博文在介绍Bootstrap 3呢？
　　技术没有好坏之分，只有适合和不适合的区别，因为我们这个项目对IE有明确的要求，所以Bootstrap 3相对来说更适合，栅格系统又是我认为的Bootstrap的精髓，所以呢，我们就开始今天的博文吧～
　　简介
　　Bootstrap中的栅格系统就是通过一系列的行（row）与列（column）的组合创建页面布局。
　　要使用栅格系统，就要遵循以下规则：
　　1、数据行(.row)必须包含在容器.container或.container-fluid中
　　2、列(.column)必须放在数据行(.row)中
　　3、页面内容应当放置在列容器（.column）之内
　　4、列与列之间设置了15px的内距（padding）.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {   position: relative;   min-height: 1px;   padding-right: 15px;   padding-left: 15px; }
　　在Bootstrap 4中添加了一个槽宽(Gutters)的概念，可以用no-gutters类来添加一个无内边距的列
　　no-gutter实现代码如下：.no-gutters {   margin-right: 0;   margin-left: 0; } .no-gutters > .col, .no-gutters > [class*=＂col-＂] {   padding-right: 0;   padding-left: 0; }
　　把no-gutters添加到row上就可以创建一个没有边距的列了，当然以下代码同时也展示了一个8列的栅格系统： 		 			 			 		 	栅格参数
　　Bootstrap 3 栅格参数把屏幕分成了四类（超小屏，小屏，中屏和大屏），分界点为768px、992px和1220px
　　把小屏幕和超小屏幕分界点定在768px已经不满足现在的需求了，所以在bootstrap 4中进行了优化，增加了576px这一个档位。
　　假设我们以bootstrap4的分隔节点重构Bootstrap 3，那么我们只需要保持-xs-这一档位不变，加上576px这一段媒体查询@media (min-width: 576px) { /*.col-sm-*{   	加上小屏代码 }*/ }
　　以前我们-col-xs- 则要改成 -col-sm-
　　以前我们-col-sm- 则要改成 -col-md-
　　以前我们-col-md- 则要改成 -col-lg-
　　以前我们-col-lg- 则要改成 -col-xl-
　　也就是前缀依次向后挪一位就可以了，这样改造过后的bootstrap 3在不同分辨率上的表现会更加合理些。
　　列的实现原理（以Bootstrap3为例）
　　我们以.col-xs-*为例，其他的除了前缀不一样外，其原理都是完全一样的。.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {   float: left; } .col-xs-12 {   width: 100%; } .col-xs-11 {   width: 91.66666667%; } .col-xs-10 {   width: 83.33333333%; } .col-xs-9 {   width: 75%; } .col-xs-8 {   width: 66.66666667%; } .col-xs-7 {   width: 58.33333333%; } .col-xs-6 {   width: 50%; } .col-xs-5 {   width: 41.66666667%; } .col-xs-4 {   width: 33.33333333%; } .col-xs-3 {   width: 25%; } .col-xs-2 {   width: 16.66666667%; } .col-xs-1 {   width: 8.33333333%; }
　　1、column采用百分比布局，默认为12列
　　col-xs-12就占100%，11列就占11/12（91.66666667%），10列就为5/6（83.33333333%）以此类推
　　2、所有的列都是左浮动
　　所以bootstrap用了以下代码清除浮动.container-fluid:before, .container-fluid:after, .row:before, .row:after{ 	display: table; 	content: ＂ ＂; } .container:after, .container-fluid:after, .row:after{   clear: both; } 列偏移
　　有时候，我们不希望相邻的两个内容列之间有空隙，又或者我们想要某个列居中，这个时候就可以用到列偏移。
　　先看源码：.col-xs-offset-12 {   margin-left: 100%; } .col-xs-offset-11 {   margin-left: 91.66666667%; } .col-xs-offset-10 {   margin-left: 83.33333333%; } .col-xs-offset-9 {   margin-left: 75%; } .col-xs-offset-8 {   margin-left: 66.66666667%; } .col-xs-offset-7 {   margin-left: 58.33333333%; } .col-xs-offset-6 {   margin-left: 50%; } .col-xs-offset-5 {   margin-left: 41.66666667%; } .col-xs-offset-4 {   margin-left: 33.33333333%; } .col-xs-offset-3 {   margin-left: 25%; } .col-xs-offset-2 {   margin-left: 16.66666667%; } .col-xs-offset-1 {   margin-left: 8.33333333%; } .col-xs-offset-0 {   margin-left: 0; }
　　翻看源码我们发现列偏移其实也不神奇，-col-*-offset就是运用margin-left把列往右移，相当于左侧补列。
　　比如说我们有个内容列在中等屏幕下占8列，并且居中，我们就可以用以下代码实现 		 			内容
　　col-md-8保证了我们在中屏幕下内容列始终占屏幕66.7%,col-md-offset-2保证了我们在这个内容列始终有16.7%左边距，这样就保证内容列的居中。
　　ps：
　　使用了col-xs-offset-*在超小屏幕上偏移了列，要使用col-sm-offset-0（具体以你的代码为准）把列偏移回来，这样才可以在超小屏幕上实现偏移并且不会影响到更大的屏幕
　　pps:
　　还有个小细节很容易被忽略，在bootstrap中，默认设定了元素的现实方式为box-sizing: border-box，这样才能保证默认每个列上15px的边距在百分比下布局不出滚动条不换行。* {     -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } *:before, *:after{ 	  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;     box-sizing: border-box; } box-sizing
　　这里再花一分钟简单说下box-sizing，假如说页面上有一个id为box1的元素#box1{ 	width:200px; 	height:200px; 	border:8px solid red; 	padding:20px; 	box-sizing: border-box; }
　　box-sizing: border-box;
　　则元素实际宽高为144px,实际占用宽度为144 + 20 * 2 + 8 * 2，总宽度还是200px
　　box-sizing: content-box;
　　元素实际宽高为200px,实际占用的宽度为200 + 20 * 2 + 8 * 2 = 256px