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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。