bootstrap柵格系統(tǒng)

bootstrap柵格系統(tǒng)是bootstrap的核心以及精髓所在

一、容器

• 1.流體容器
  • 流體容器寬度為100%（即占當(dāng)前視口的寬度）
• 2.固定容器
  大于等于1200(lg 大屏pc) : 1170（1140+槽寬）
  大于等于992(md 中屏pc) : 小于1200:970（940+槽寬）
  大于等于768(sm 平板 ): 小于992:750（720+槽寬）
  小于768(xs 移動(dòng)手機(jī)) : auto

二、柵格系統(tǒng)的應(yīng)用

1. 柵格參數(shù)

2. 柵格組合

利用柵格系統(tǒng)在不同設(shè)備狀態(tài)下頁(yè)面布局有不同的提現(xiàn)

例如

<div class="col-lg-10 col-md-6">col-lg-10</div>
<div class="col-lg-2 col-md-6">col-lg-2</div>

3. 列偏移和列排序

列排序

通過使用 .col-xx-push-y和 .col-xx-pull-y類就可以很容易的改變列（column）的順序。

實(shí)際上在控制元素left值

例如

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

列偏移

.col-xx-offset-y 類可以將列向右側(cè)偏移
實(shí)際上在控制元素margin-left的值

例如

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

4. 響應(yīng)式工具的使用

利用.visible-xx 和 .hidden-xx 控制元素在該xx設(shè)備上的顯示與隱藏

<!--該元素在視口小于768px的情況下隱藏-->
<div class="jumbotron hidden-xs">
<h1>Hello, world!</h1>
</div>
<!--該元素在視口小于768px的情況下顯示-->
<div class="jumbotron visible-xs">
<h1>Hello, world!</h1>
</div>

5. 柵格盒模型設(shè)計(jì)的精妙之處

容器兩邊具有15px的padding

• 為了維護(hù)槽寬的規(guī)則，
  • 列兩邊必須得要15px的padding
• 為了能使列嵌套行
  • 行兩邊必須要有-15px的margin
• 為了讓容器可以包裹住行
  • 容器兩邊必須要有15px的padding

三、柵格系統(tǒng)源碼解析

1.基本實(shí)現(xiàn)的流程

• 固定和流體容器的公共樣式在less混合中的代碼

注：@grid-gutter-widt：槽寬

/*@gutter在bootstrap里默認(rèn)為30px*/
.container-fixed(@gutter: @grid-gutter-width) {
  margin-right: auto;
  margin-left: auto;
  padding-left:  floor((@gutter / 2)); //向下取整 (此時(shí)默認(rèn)值為15px)
  padding-right: ceil((@gutter / 2));  //向上取整 (此時(shí)默認(rèn)值為15px)
  &:extend(.clearfix all); //繼承清除浮動(dòng)的樣式
}
/*.clearfix的樣式*/
.clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

• 固定容器和流體容器的樣式在less實(shí)際中的代碼

.container {
  .container-fixed();//繼承默認(rèn)樣式
  //利用媒體查詢判斷當(dāng)前應(yīng)當(dāng)采用的寬度
  //移動(dòng)優(yōu)先！
  @media (min-width: @screen-sm-min) {
    width: @container-sm;
  }
  @media (min-width: @screen-md-min) {
    width: @container-md;
  }
  @media (min-width: @screen-lg-min) {
    width: @container-lg;
  }
}
//流體容器
.container-fluid {
  .container-fixed();
}

• 行元素默認(rèn)樣式在less混合中的代碼

.make-row(@gutter: @grid-gutter-width) {
  margin-left:  ceil((@gutter / -2));
  margin-right: floor((@gutter / -2));
  &:extend(.clearfix all);
}

• 行元素樣式在less中的代碼

.row {
  .make-row();
}

• 列元素樣式在less中實(shí)際的代碼

// 列的默認(rèn)樣式
.make-grid-columns();
// 判斷當(dāng)前視口的大小采用不同的樣式
//移動(dòng)優(yōu)先!
.make-grid(xs);
@media (min-width: @screen-sm-min) {
  .make-grid(sm);
}
@media (min-width: @screen-md-min) {
  .make-grid(md);
}
@media (min-width: @screen-lg-min) {
  .make-grid(lg);
}

2.核心代碼

• 列元素樣式的初步實(shí)現(xiàn)

//列元素的默認(rèn)樣式實(shí)現(xiàn)
.make-grid-columns() {
   //此時(shí)@index為1
  .col(@index) { 
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    // @item: ~".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1";//不編譯
    .col((@index + 1), @item);
    // .col(2,  ~".col-xs-1, .col-sm-1, .col-md-1, .col-lg-1");
  }
//利用遞歸循環(huán)創(chuàng)建所有列元素的樣式
//@grid-columns默認(rèn)為12 @list為@item的集合
.col(@index, @list) when (@index =< @grid-columns) {
//當(dāng)@index=<12時(shí)執(zhí)行以下代碼
    @item: ~".col-xs-@{index}, .col-sm-@{index}, .col-md-@{index}, .col-lg-@{index}";
    //此時(shí)index為2則
    //@item: ~".col-xs-2, .col-sm-2, .col-md-2, .col-lg-2";
    .col(3, ~".col-xs-1, .col-sm-1, .col-md-1, 
    .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2");
    //因?yàn)?<=12則繼續(xù)執(zhí)行遞歸
    //由此可以當(dāng)遞歸完成時(shí)
    @list:.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-12, .col-sm-12, .col-md-12, .col-lg-12
}
//當(dāng)@index>12時(shí)執(zhí)行下面的代碼
//以上代碼完成時(shí)遞歸完成時(shí)index>13
//執(zhí)行以下代碼
  .col(@index, @list) when (@index > @grid-columns) { 
    @{list} {
      position: relative;
      min-height: 1px;
      padding-left:  ceil((@grid-gutter-width / 2));
      padding-right: floor((@grid-gutter-width / 2));
    }
    //由于此時(shí)@list狀態(tài)已經(jīng)完成則以下代碼為
    //.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-12, .col-sm-12, .col-md-12, .col-lg-12{
     // position: relative;
      //min-height: 1px;
      //padding-left:  ceil((@grid-gutter-width / 2));
      //padding-right: floor((@grid-gutter-width / 2));
    //}
    //完成所有列的狀態(tài)的默認(rèn)值
    //及.make-grid-columns()完成所有列的狀態(tài)的默認(rèn)樣式 
  }
  //傳入默認(rèn)值1
  .col(1); 
}

• 列元素具體樣式的實(shí)現(xiàn)

.make-grid(@class) {
  //1.寫入所有列的默認(rèn)值
  .float-grid-columns(@class);
  //2.規(guī)定個(gè)個(gè)列的寬度
  .loop-grid-columns(@grid-columns, @class, width);
  //3.列排列控制的是目標(biāo)元素的left或right的值由于值不能為0所以分開操作
  //3.1列向右排列
  .loop-grid-columns(@grid-columns, @class, pull);
  //3.2列向右排列
  .loop-grid-columns(@grid-columns, @class, push);
  //4.設(shè)置列偏移 控制的是margin-left;
  .loop-grid-columns(@grid-columns, @class, offset);
}

• 寫入所有列的默認(rèn)值

//@class 為 xs,sm,md,lg
//下面的代碼里@class的值設(shè)為xs
.float-grid-columns(@class) {
  .col(@index) { 
    @item: ~".col-@{class}-@{index}";
    //@item:~".col-xs-1";
    .col((@index + 1), @item);
    //.col(2, ~".col-xs-1");
  }
  //同樣利用遞歸循環(huán)index至12完成對(duì)每個(gè)@class列的屬性
  .col(@index, @list) when (@index =< @grid-columns) { 
    @item: ~".col-@{class}-@{index}";
    //@item: ~".col-xs-2";
    .col((@index + 1), ~"@{list}, @{item}");
    //.col(3, ~".col-xs-1, .col-xs-2");
    //遞歸完成時(shí)@list為：
    //.col-xs-1, .col-xs-2,...,.col-xs-12
  }
  //當(dāng)遞歸完成時(shí)執(zhí)行下面的代碼
  .col(@index, @list) when (@index > @grid-columns) { 
    @{list} {
      float: left;
    }
    //以上代碼及為
    //.col-xs-1, .col-xs-2,...,.col-xs-12{
     //float: left;
    //}
  //}
  //填入@index的默認(rèn)值1
  .col(1); 
}

• 設(shè)置寬度列排列和列偏移的入口代碼

//由于當(dāng)前狀態(tài)下index為12則從12開始遞歸至0
//@index索引 @class柵格類 @type 要進(jìn)行操作的屬性
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type);
  .loop-grid-columns((@index - 1), @class, @type);
}

• 規(guī)定個(gè)個(gè)列的寬度

//當(dāng)@type = width時(shí)執(zhí)行的代碼
.calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}
//以上代碼可以表示為
.loop-grid-columns(@index, @class, @type) when (@index >= 0) {
  .calc-grid-column(@index, @class, @type) when (@type = width) and (@index > 0) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
  //.col-xs-12 {
  //   width: percentage(12/12));//將數(shù)值轉(zhuǎn)換為百分比
  //}
  
}
  .loop-grid-columns((@index - 1), @class, @type);
  //再次執(zhí)行
  //.col-xs-11 {
    //width: percentage(11/12));//將數(shù)值轉(zhuǎn)換為百分比
  //}
}
//遞歸完成后得到的是
//.col-xs-12 {
//    width: percentage(12/12));//將數(shù)值轉(zhuǎn)換為百分比
//}
//.col-xs-11 {
//    width: percentage(11/12));//將數(shù)值轉(zhuǎn)換為百分比
//}....
//.col-xs-1 {
//    width: percentage(1/12));//將數(shù)值轉(zhuǎn)換為百分比
//}

• 列排列控制

//當(dāng)@type = push執(zhí)行如下代碼
//@index的遞減在.loop-grid-columns(@index, @class, @type) when (@index >= 0) 環(huán)境下已經(jīng)實(shí)現(xiàn)
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index > 0) {
  .col-@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
  //以上代碼生成的值為
  //.col-xs-push-12 {
    //left: percentage(12/12);
  //}
  //.col-xs-push-11 {
    //left: percentage(11/12);
  //}....
  //.col-xs-push-1 {
    //left: percentage(1/12);
  //}
}
//當(dāng)index為0時(shí)執(zhí)行下面的代碼
.calc-grid-column(@index, @class, @type) when (@type = push) and (@index = 0) {
  .col-@{class}-push-0 {
    left: auto;
  }
  //.col-xs-push-0 {
    //left: auto;
  //}
}

//向左偏移生成模式與向右相同
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index > 0) {
  .col-@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
}
.calc-grid-column(@index, @class, @type) when (@type = pull) and (@index = 0) {
  .col-@{class}-pull-0 {
    right: auto;
  }
}

• 列偏移控制

//當(dāng)@type = offset時(shí)執(zhí)行如下代碼
.calc-grid-column(@index, @class, @type) when (@type = offset) {
  .col-@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));//值轉(zhuǎn)換為百分比
  }
  //運(yùn)行結(jié)果
  //.col-xs-offset-12 {
    //margin-left: percentage(12/12);
  //}...
  //.col-xs-offset-1 {
    //margin-left: perc/entage(1/12);
  //}
}

原文鏈接.