Bootstrap源码解读网格系统（3）
源码解读Bootstrap网格系统
工作原理
数据行(.row)必须包含在容器(.container)中，以便为其赋予合适的对齐方式和内距(padding)。如：
<divclass="container"> <divclass="row"></div> </div>
.container的实现源码：
.container{
padding-right:15px;
padding-left:15px;
margin-right:auto;
margin-left:auto;
}
@media(min-width:768px){
.container{
width:750px;
}
}
@media(min-width:992px){
.container{
width:970px;
}
}
@media(min-width:1200px){
.container{
width:1170px;
}
}
在行中可以添加列，但列数之和不能超过平分的总列数，比如12。如：
<divclass="container"> <divclass="row"> <divclass="col-md-4"></div> <divclass="col-md-8"></div> </div> </div>
列的实现源码如下：
.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;
}
1、具体内容应当放置在列容器之内，而且只有列才可以作为行容器的直接子元素。
2、通过设置内距(padding)从而创建列与列之间的间距。然后通过为第一列和最后一列设置负值的外距(margin)来抵消内距(padding)的影响。
.row的实现源码：
.row{
margin-right:-15px;
margin-left:-15px;
}
列组合
列组合就是更改数字来合并，不过列总和数不能超12，有点类似于表格的colspan属性。实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。以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%;
}
列偏移
例如，在列元素上添加“col-md-offset-4”，表示该列向右移动4个列的宽度。
实现原理非常简单，就是利用十二分之一的margin-left，有多少个offset，就有多少个margin-left。以xs为例，实现源码如下：
.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-xs-pull-数字”，“col-xs-push-数字”来实现这个效果。
Bootstrap仅通过设置left和right来实现定位效果。以xs为例，实现源码如下：
.col-xs-pull-12{
right:100%;
}
.col-xs-pull-11{
right:91.66666667%;
}
.col-xs-pull-10{
right:83.33333333%;
}
.col-xs-pull-9{
right:75%;
}
.col-xs-pull-8{
right:66.66666667%;
}
.col-xs-pull-7{
right:58.33333333%;
}
.col-xs-pull-6{
right:50%;
}
.col-xs-pull-5{
right:41.66666667%;
}
.col-xs-pull-4{
right:33.33333333%;
}
.col-xs-pull-3{
right:25%;
}
.col-xs-pull-2{
right:16.66666667%;
}
.col-xs-pull-1{
right:8.33333333%;
}
.col-xs-pull-0{
right:auto;
}
.col-xs-push-12{
left:100%;
}
.col-xs-push-11{
left:91.66666667%;
}
.col-xs-push-10{
left:83.33333333%;
}
.col-xs-push-9{
left:75%;
}
.col-xs-push-8{
left:66.66666667%;
}
.col-xs-push-7{
left:58.33333333%;
}
.col-xs-push-6{
left:50%;
}
.col-xs-push-5{
left:41.66666667%;
}
.col-xs-push-4{
left:33.33333333%;
}
.col-xs-push-3{
left:25%;
}
.col-xs-push-2{
left:16.66666667%;
}
.col-xs-push-1{
left:8.33333333%;
}
.col-xs-push-0{
left:auto;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。