Thumb bootstrap4 article cover

Bootstrap 4 排版三大亮點深度解析

by Ringo Yang 2018-01-20 18:04 UTC

近年來熱門的前端框架 Bootstrap 自 2015/12/8 發表了 Bootstrap 4 Alpha 1 版本之後,又經過了一年多,在 2017/10/19 發表了Bootstrap 4 Beta 2 版本,並且 Beta 3 已正在進行,根據官方表示希望在 Beta 3 版本後可以發行最終版本,相信目前的版本已經相當接近完成!

而 Bootstrap 4 可說是進行了非常大幅度的變更,例如遷移至 Sass 、對於 Flexbox 的支援、使用 ES6 重寫所有 Javascript 插件、新元素 Cards 、放棄支援 IE8 、改進網格系統 … 等,本文將會挑出 Bootstrap 4 在排版方面的三大亮點「網格系統 ( Grid System ) 」、「垂直水平對齊 ( align & justify ) 」與「新元素 “卡片” ( Cards ) 」進行詳細介紹。

結合 flexbox 後有了新樣貌的網格系統 ( Grid System )

網格系統雖然已經不是新玩意了,但 Bootstrap 4 使用了 flexbox 重新建立新的網格系統,一樣的符合響應式設計,並且能夠更方便的實現等高&對齊置中效果。

以下表格可以清楚看到 Bootstrap 4 如何在不同大小的裝置上運作

  Extra small <576px Small ≥576px Medium ≥768px Large ≥992px Extra large ≥1200px
container最大寬 自動 540px 720px 960px 1140px
Class設定 .col- .col-sm- .col-md- .col-lg- .col-xl-
  1. 原本的 .col-xs- 已消失,取而代之的 .col-* 在語意上代表的差別是「從最小設備到最大設備都相同的網格」,不過 Bootstrap 4 與 Bootstrap 3 是相容的,所以過去的 .col-xs-* 還是可以使用。

  2. 新增了支援超大型裝置的 extra large (xl) ,成為五個 RWD 中斷點。

  3. 過去需要計算好每列的12欄該如何分配並設定 .col-* ,在 Bootstrap 4 可以直接使用 .col.col-* ,沒有設定數字比例的欄位會自動成為等寬且等高的欄位。

例如:

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
  2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

若想指定只在某一個裝置寬度才自動調整寬度時,可使用 col-{breakpoint}-auto

例如:

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

結合 Flexbox 後實現超便利垂直&水平對齊 ( align & justify )

在 CSS3 發表 Flexbox 以後,我們不再需讓區塊垂直對齊的那些 CSS tricks 了!而 Bootstrap 當然也從善如流,將此特性加入新的 Bootstrap 4 內。

垂直對齊

.row.col 加入 .align-items-start align-items-center align-items-end ,就可以讓列或欄垂直的置頂、置中或置底。

例如列的垂直對齊:

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

與欄的垂直對齊:

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

水平對齊

.row 加入 .justify-content-start justify-content-center justify-content-end ,就可以讓列置左、水平置中或置右。而另外兩個新元素 justify-content-around 是讓該列內的欄平均的排列在該列當中,justify-content-between 則是讓列類的欄靠邊排列在該列當中。

例如:

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

而其他原本在 Bootstrap 3 當中使用的位移功能 ( offset ) 也還是存在著,但寫法已經從 .col-{breakpoint}-offset-* 改為 .offset-{breakpoint}-* ,並新增了Margin 通用類別 ( Margin utilities ) ml-auto mr-auto ,而他們也可以加上 RWD 中斷點指定變成 .ml-{breakpoint}-auto.mr-{breakpoint}-auto 等。

位移功能 ( offset ):

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

Margin 通用類別 ( Margin utilities ):

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

其他當然還有相當多關於網格系統 ( Grid System ) 的應用與變化,可參考關於 Grid 部分的官方文件

新元素 “卡片” ( Cards )

Cards 是 Bootstrap 4 的全新組件,一樣使用了 Flexbox 建構,用來取代原本的.panel、.well 和 .thumbnail,並且多了瀑布流樣式 ( Masonry-like )可供使用。 卡片可支援各種內容,包括圖像、文字內容、清單、連結等。

文字內容:

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

圖片與描述:

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

另外也可在卡片內加上頁首 ( header ) 或頁腳 ( footer ):

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

而 Bootstrap 4 更加強化了一些色彩情境與邊框的通用類別,我們也可以將它套用在卡片上,讓卡片的背景與顏色更加活化。

變更背景與字色:

<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

變更框線:

<div class="card border-primary mb-3" style="max-width: 20rem;">
  <div class="card-header">Header</div>
  <div class="card-body text-primary">
    <h4 class="card-title">Primary card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

瀑布流樣式 ( Masonry-like ): 將卡片包在 .card-columns 中,就會讓卡片呈現瀑布式排列。

<div class="card-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title that wraps to a new line</h4>
      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
  <div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img" src="..." alt="Card image">
  </div>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h4 class="card-title">Card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

也可以對欄位使用一些程式碼進行客製化,例如:

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 5;
  }
}

像這樣就可以調整在不同裝置下生成的欄位數。

卡片的更多資訊可以在關於 Cards 部分的官方文件找到。

結尾

以上三個部分的介紹雖然只是冰山一角,但希望能讓大家對 Bootstrap 4 能夠產生想更進一步研究的興趣,當然更詳細的內容可以參考 Bootstrap 4 官方文件

有任何錯誤或建議,也歡迎留言或來信告知唷!

«回文章列表