利用 Bootstrap Grid System 排版的學習筆記

利用 Bootstrap Grid System 來排版真是一個方便的方法-若頁面上有許多小方格會隨著解析度而有不同的排列方式,就很適合用 Grid System 來排版。像這樣~

Bootstrap Grid System in Responsive Web Design

Am I Responsive?

規則

Grid System 是經由 Row(列)和 Column(行)來建立頁面的架構的,然後再將內容裝在這些由 Row(列)和 Column(行)組成的框框裡面。簡述規則如下:

Media Queries 的分段點

Grid Options

列表如下。

Bootstrap Grid Options

因此我們可以依此做基本的設定,在 Desktop 的結果如下:

stacked-to-horizontal

Mobile 和 Tablet 就是垂直排列:

stacked-to-horizontal-vertical

可參考官方網站範例

針對不同 Device 混合使用

也許我們不想讓 Colume 在較小解析度的 Device 上全都垂直呈現,因為這樣非常單調無聊 - 那就混合使用這些 class 吧。每一種 class 單獨控制一種裝置,例如:col-xs-*控制 Mobile,col-sm-6-*控制 Tablet,col-md-*控制 Desktop。

預覽如下圖。

grid-example-mixed-complete

<!-- Mobile上各自一列, Tablet上兩欄比例各半、Desktop上兩欄比例為3:2  -->
<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Mobile上各佔一半, Tablet以上三欄各佔1/3 -->
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

Column Wrapping

基本上一個 Row 放置 12 個 Column,若有一個 Row 超過 12 個 Column,則會斷行放置多出來的 Column。

Column Wrapping

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>

  <!-- 9 + 4 = 13 > 12,因此以下斷行放置多出來的Column -->
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

可參考官方網站範例

Responsive Column Resets

在某些分段點下,Column 沒有正確被擺放。這時就可以使用.clearfixresponsive utility classes 來作修正。而在某些狀況下,可能還需要用到 reset offsets、pushes 或 pulls。

利用col-md-offset-0col-lg-offset-0做修正。

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

正常版(左圖),如果沒有設定 class col-md-offset-0col-lg-offset-0就會壞掉唷(右圖)!

Responsive Column Resets

可參考官方網站範例

Offsetting Columns

將 Column 向右移,意即向左填補空格。

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <!-- 向左填補4個Column -->
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <!-- 向左填補3個Column -->
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <!-- 向左填補3個Column -->
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

grid-offsetting

可參考官方網站範例

Nesting Columns

巢狀放置 Column。

Nesting Columns

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

可參考官方網站範例

Column Ordering

設定 Column 的順序 - .col-md-push-*.col-md-pull-*

Column Ordering

<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>

可參考官方網站範例

Less Mixins and Variables

使用 Less mixins and variables 來做客製化調整。雖然 Bootstrap 官網可以做些許客製化,但修改的幅度還是太小而且速度太慢了。最好的方式還是用 LESS 來修改。

使用 Prepros 將 .less 轉為 .css。

實作範例

範例 1

簡單暖身題,先練練基本指令。設定參數值:blue、gray、lime、white、sansFontFamily,當用到該值時使用參數(例如:@gray)即可。

/* Variables */
@blue: #049cdb;
@gray: #555;
@lime: #32CD32;
@white: #fff;
@sansFontFamily: "PT Sans", Helvetica, Arial, sans-serif;

.blog-article {
  h2 {
    font-family: @sansFontFamily;
    color: @gray;
  }
}

/* Mixins */
.blue-background {
  background: url(path/img.png) 0 0 repeat-x @blue;
}

.blog-article {
  .blue-background;
}

.widget-box {
  color: @white;
  border: 2px solid @lime;
  .blue-background;
}

Output

Prepros 會幫我們輸出 CSS 檔案(如下)。

/* Variables */
.blog-article h2 {
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  color: #555555;
}

/* Mixins */
.blue-background {
  background: url(path/img.png) 0 0 repeat-x #049cdb;
}

.blog-article {
  background: url(path/img.png) 0 0 repeat-x #049cdb;
}

.widget-box {
  color: #ffffff;
  border: 2px solid #32cd32;
  background: url(path/img.png) 0 0 repeat-x #049cdb;
}

範例參考 Using Bootstrap With LESS CSS – Tutorial

範例 2

客製化 Bootstrap 的 label - 改變 label 的字體顏色為#4400cc

/* Import Bootstrap Less Files */
@import "bootstrap.less";
@label-color: #4400cc;

.custom-label {
  .label;
}

Output

擷取客製化的部份程式碼。

.label {
  display: inline;
  padding: .2em .6em .3em;
  font-size: 75%;
  font-weight: bold;
  line-height: 1;
  color: #4400cc;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

Demo

當使用 HTML Tag 如下,Custom Label 變呈現先前設定的紫色樣貌。

<label class="custom-label">
  Custom Label
</label>

範例 3

LESS 的部份

.wrapper {
  .make-row();
}

.content-main {
  .make-sm-column(8);
}

.content-secondary {
  .make-sm-column(4);
}

輸出的 CSS 部份

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

.content-main {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .content-main {
    float: left;
    width: 66.66666667%;
  }
}

.content-secondary {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .content-secondary {
    float: left;
    width: 33.33333333%;
  }
}

HTML 的部份

<div class="container">
  <div class="wrapper">
    <div class="content-main">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_bread.jpg">
        </div>
        <div class="box-body">
          <h3>Bread</h3>
          <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pro</p>
        </div>
      </div>
    </div>
    <div class="content-secondary">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_strawberry.jpg">
        </div>
        <div class="box-body">
          <h3>Strawberry</h3>
          <p>Por scientie, musica, sport etc. Li lingues differe solmen in li grammatica, li pro</p>
        </div>
       </div>
    </div>
  </div>
</div>

Demo

Bootstrap Grid System

可參考官方網站範例

範例4

除了使用.make-row(),也混合使用.make-xs/sm/md/lg-column()

LESS 的部份

.left-and-right {
  .make-row();

  .left {
    .make-sm-column(1);
    .make-md-column(7);
    .make-lg-column(4);
  }

  .right {
    .make-sm-column(11);
    .make-md-column(5);
    .make-lg-column(8);
  }
}

輸出的 CSS 部份

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

.left-and-right .left {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 992px) {
  .left-and-right .left {
    float: left;
    width: 50%;
  }
}

.left-and-right .right {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 992px) {
  .left-and-right .right {
    float: left;
    width: 50%;
  }
}

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

.left-and-right .left {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .left-and-right .left {
    float: left;
    width: 16.66666667%;
  }
}

@media (min-width: 992px) {
  .left-and-right .left {
    float: left;
    width: 58.33333333%;
  }
}

@media (min-width: 1200px) {
  .left-and-right .left {
    float: left;
    width: 33.33333333%;
  }
}

.left-and-right .right {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 768px) {
  .left-and-right .right {
    float: left;
    width: 83.33333333%;
  }
}

@media (min-width: 992px) {
  .left-and-right .right {
    float: left;
    width: 41.66666667%;
  }
}

@media (min-width: 1200px) {
  .left-and-right .right {
    float: left;
    width: 66.66666667%;
  }
}

HTML 的部份

<div class="container">
  <div class="left-and-right">
    <div class="left">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_bread.jpg">
        </div>
        <div class="box-body">
          <h3>Bread</h3>
          <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. </p>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="box">
        <div class="box-heading">
          <img src="images/food_strawberry.jpg">
        </div>
        <div class="box-body">
          <h3>Strawberry</h3>
          <p>Por scientie, musica, sport etc. Por scientie, musica, sport etc. Por scientie, musica, sport etc. Por scientie, musica, sport etc. </p>
        </div>
      </div>
    </div>
  </div>
</div>

Demo

Bootstrap Grid System

Note - Mixins 列表

推薦閱讀

Bootstrap Gripd System 相關

Bootstrap Less Mixins and Variables 相關

Bootstrap 版本相關

RWD觀念相關


這篇文章的原始位置在這裡-利用 Bootstrap Grid System 排版的學習筆記

由於部落格搬遷至此,因此在這裡放了一份,以便閱讀;部份文章片段也做了些許修改,以期提供更好的內容。
comments powered by Disqus