Bootstrap栅格系统源码解析

Bootstrap栅格系统的实现原理是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,制作出强大的响应式网格系统。Bootstrap默认的栅格系统平分为12份,在使用的时候大家可以根据实际情况重新编译LESS(或Sass)源码来修改12这个数值(也就是换成24或32,当然你也可以分成更多,具体看你自己需要)。

1、数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding)。
栗子:

<div class="container">
	<div class="row"></div>
</div>

以下为.container样式的源码

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px; /*小型屏幕container样式的宽度*/
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px; /*中型屏幕 增大min-width范围*/
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px; /*大型屏幕 再次增大min-width范围*/
  }
}

注:如果想让row充满全屏100%显示,那就不能用container了,因为其针对四个不同的屏幕大小设定了尺寸。可以自己定义一个100%的样式,但别忘了修复row的-15px的外边距(即设置15px的padding值)
2、使用行(row)在水平方向创建一组列(column),具体内容则放置于列(column)内,且只有列(column)可作为行(row)的直接子元素。可以使用.col-xs(超小屏)/sm(小屏)/md(中等屏)/lg(大屏)-n(n为数字意思为占几列宽度)来快速创建栅格布局。
栗子(以中等屏为例):

<div class="container">
	<div class="row">
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
		<div class="col-md-1 color">col-md-1</div>
	</div>
	<div class="row">
		<div class="col-md-6 color">col-md-6</div>
		<div class="col-md-6 color">col-md-6</div>
	</div>
</div>

浏览器渲染效果如下:
%e7%81%ab%e7%8b%90%e6%88%aa%e5%9b%be_2016-09-13t12-36-26-227z
源码用float让每个列左浮动,然后又定义了每个组合的宽度百分比:

.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%;
}

3、响应式栅格
通过下面图片可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面进行工作的。
wechatimg1
Bootstrap针对不同尺寸的屏幕(包括手机、平板、PC等等)设置了不同的样式类,这样开发人员就可以在一个元素上应用不同类型的样式,以适配不同尺寸的屏幕。
4、基本用法
网格系统用来布局,其实就是列的组合。Bootstrap框架的网格系统中有四种基本的用法。
1)列组合
列组合简单理解就是更改数字来合并列(原则:列总和数不能超12),有点类似于表格的colspan属性,实现列组合方式也非常简单,只涉及两个CSS两个特性:浮动与宽度百分比。
2)列偏移
有的时候,我们不希望相邻的两个列紧靠在一起,但又不想使用margin或者其他的技术手段来。这个时候就可以使用列偏移(offset)功能来实现。使用列偏移也非常简单,只需要在列元素上添加类名“col-md-offset-*”(其中星号代表要偏移的列组合数),那么具有这个类名的列就会向右偏移。例如,你在列元素上添加“col-md-offset-4”,表示该列向右移动4个列的宽度。实现原理就是利用十二分之一(1/12)的margin-left。然后有多少个offset,就有多少个margin-left。
源码如下:

.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-md-offset-*”对列进行向右偏移时,要保证列与偏移列的总数不超过12,不然会致列断行显示。
3)列排序
列排序其实就是改变列的方向,就是改变左右浮动,并且设置浮动的距离。在Bootstrap框架的网格系统中是通过添加类名“col-md-push-*”和“col-md-pull-*” (其中星号代表移动的列组合数)。
Bootstrap在此通过设置left和right来实现定位效果。源码如下:

.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;
}

4)列的嵌套
Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行(row)容器,然后在这个行容器中插入列(像前面介绍的一样使用列)。但在列容器中的行容器(row),宽度为100%时,就是当前外部列的宽度。
注意:嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

您可能还喜欢...

发表评论

电子邮件地址不会被公开。 必填项已用*标注