快捷導(dǎo)航

Bootstrap源碼解讀網(wǎng)格系統(tǒng)（3）

更新時間：2016年12月22日 16:46:58 作者：藝術(shù)就是爆炸

這篇文章主要源碼解讀了Bootstrap網(wǎng)格系統(tǒng)，介紹了Bootstrap網(wǎng)格系統(tǒng)的工作原理具有一定的參考價值，感興趣的小伙伴們可以參考一下

源碼解讀Bootstrap網(wǎng)格系統(tǒng)

工作原理

數(shù)據(jù)行(.row)必須包含在容器(.container)中，以便為其賦予合適的對齊方式和內(nèi)距(padding)。如：

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

.container的實(shí)現(xiàn)源碼：

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

在行中可以添加列，但列數(shù)之和不能超過平分的總列數(shù)，比如12。如：

<div class="container">
 <div class="row">
 <div class="col-md-4"></div>
 <div class="col-md-8"></div>
 </div>
</div>

列的實(shí)現(xiàn)源碼如下：

.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、具體內(nèi)容應(yīng)當(dāng)放置在列容器之內(nèi)，而且只有列才可以作為行容器的直接子元素。
2、通過設(shè)置內(nèi)距(padding)從而創(chuàng)建列與列之間的間距。然后通過為第一列和最后一列設(shè)置負(fù)值的外距(margin)來抵消內(nèi)距(padding)的影響。

.row的實(shí)現(xiàn)源碼：

.row {
 margin-right: -15px;
 margin-left: -15px;
}

列組合

列組合就是更改數(shù)字來合并，不過列總和數(shù)不能超12，有點(diǎn)類似于表格的colspan屬性。實(shí)現(xiàn)列組合方式非常簡單，只涉及兩個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個列的寬度。
實(shí)現(xiàn)原理非常簡單，就是利用十二分之一的margin-left，有多少個offset，就有多少個margin-left。以xs為例，實(shí)現(xiàn)源碼如下：

.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-數(shù)字”，“col-xs-push-數(shù)字”來實(shí)現(xiàn)這個效果。
Bootstrap僅通過設(shè)置left和right來實(shí)現(xiàn)定位效果。以xs為例，實(shí)現(xiàn)源碼如下：

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: