iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
0
Modern Web

前端常見問題攻略系列 第 24

怎樣也不會失手的 Bootstrap 格線運用技巧

Bootstrap 令人稱羨的其中之一就是它的格線系統,不僅易用且符合網頁視覺設計概念。雖說如此,在官網文件 落落長的文件還是令許多開發者不知如何快速上手,本篇介紹幾個核心小撇步,讓開發者僅需要記得一個口訣,就能輕鬆上手 Bootstrap 的格線系統。

Bootstrap 格線設計概念

Bootstrap 設計上都是遵循 OOCSS 的概念(關於 OOCSS 可參考),格線在此是套用其中的 容器與內容 的概念。格線表示為容器,而網頁所呈現的資訊就稱為內容。

在這個概念下,格線所代表的容器將會決定定位、寬度大小,內容不會有自己的寬度,都是由容器決定

https://ithelp.ithome.com.tw/upload/images/20201009/20083608gR2VGQJsyp.png!

因此我們先定義一個方塊作為內容,高度 100px、寬度不限,接下來由格線決定的方塊的寬度、位置。

.box {
  height: 100px;
  background-color: #69F0AE;
}

https://ithelp.ithome.com.tw/upload/images/20201009/200836087VJWVjf7Pm.png

等等會一直看到這個方塊,此方塊所代表的就是內容

簡單的口訣

許多開發者再運用 Bootstrap 時會犯了許多錯誤,如:

  • 格線內物件與非格線內容無法正確對齊
  • 格線的間距不一致
  • 產生額外的水平捲軸

引起這些錯誤的問題非常多,一一舉例說明將會佔去許多篇幅,因此請先謹記兩個要點即可:

  • .row 的內層必定為 .col
  • .col 的外層必定為 .row

.row 的內層必定為 .col

Bootstrap 使用 .row 作為水平列的定義,它會包覆著不同數量的欄線 .col,作為水平列的 .row 有包含許多樣式(如:flex、負值的 margin),這些樣式必須搭配 .container.col 進行修正。因此,如果在 .row 內置入非 .col 的物件就可能會出錯。

所以第一點,請先記得:.row 的內層必定為 .col

正確範例:

.row 的內層僅會使用 .col,不會有其它的。

<div class="row">
  <div class="col-6"><div class="box">格線內的 .box </div></div>
  <div class="col-6"><div class="box">格線內的 .box </div></div>
</div>

正確的套用情況下,不管有無使用格線,左右邊線的對齊都是一致的。
https://ithelp.ithome.com.tw/upload/images/20201009/200836080TpKZ0S1a4.png

錯誤範例

.row 的內層套用了其它元素,有無套用格線系統的元素左右將無法正確對齊。

<div class="row">
  <div class="box" style="width: 100%">其它的元素會超出格線範圍,並且預設必須加入寬度才能顯示</div>
</div>

不正確的套用情況下,.row 內的元素無法與外部元素左右邊線對齊。
https://ithelp.ithome.com.tw/upload/images/20201009/20083608cuSR2S1h3T.png

.col 的外層必定為 .row

由於 .col 會修正 .row 的部分樣式,因此 .col 獨立出現時,為了修正 .row 的額外 padding 就會使得物件無法對齊。

正確範例:

.col-* 的外層必定會有 .row

<div class="row">
  <div class="col-12"><div class="box">格線內的 .box </div></div>
</div>

無論多少數量的 .col-*,只要外層具有 .row 就會正確對齊。
https://ithelp.ithome.com.tw/upload/images/20201009/20083608XHqAa4wJNp.png

錯誤範例:

.col-* 必定在 .row 的內側,不可獨立出現

<div class="box">格線內的 .box </div>
<div class="col-12"><div class="box">格線內的 .box </div></div>

獨立出現的 .col-* 無法與其它元素正確對齊,它會加入額外的 padding

https://ithelp.ithome.com.tw/upload/images/20201009/2008360899salG7tLe.png

相同口訣、延伸運用

這兩句話看起來有很多的限制,但其實又具有很高的彈性,像是 .row 的內層必定為 .col,但只要內層是 .col 即可,沒有數量上的限制,並且 .col 的內層並沒有任何的限制。因此本段提供許多不同的變化型給大家做參考。

  • .row 的內層必定為 .col
  • .col 的外層必定為 .row
.row, .form-row

Bootstrap 4 另外有推出 .form-row 的選項(參考文件),這會產生間距較小的格線,雖然預設規劃是給予表單使用,但它也同樣很適合用在僅需要小間距的排版。

.form-row 一樣可以把它當作是 .row 的孿生兄弟,它僅是有較小的間距,其餘的概念都是與 .row 完全相同,因此他一樣符合相同的概念,內部僅能有 .col-* 的元素。

<div class="demo">
  <div class="row">
    <div class="col-6"><div class="box"></div></div>
    <div class="col-6"><div class="box"></div></div>
  </div>
  <hr>
  <div class="form-row">
    <div class="col-6"><div class="box"></div></div>
    <div class="col-6"><div class="box"></div></div>
  </div>
</div>

正確的套用下,左右邊線也是可以完全對齊的。
https://ithelp.ithome.com.tw/upload/images/20201009/20083608w1bh2JsnjM.png

巢狀

.col 的內部依然可以有 .row,並且有獨立的欄線,它會用內層有限的空間持續進行格線分割。

<div class="row">
  <div class="col-6"><div class="box"></div></div>
  <div class="col-6">
    <div class="row">
      <div class="col-6"><div class="box"></div></div>
      <div class="col-6"><div class="box"></div></div>
    </div>
  </div>
</div>

就算使用多層分割,間距、對齊都會是一致的,如果使用另一個類似概念的單層結構也是能夠完全對齊。

https://ithelp.ithome.com.tw/upload/images/20201009/20083608GAEI3gcfqV.png

最後,請別忘了 container

前面有提到 .row 會產生額外的負值 margin,當如果 .row 是直接置於最外層時會讓網頁產生水平捲軸,請避免網頁產生不必要的水平捲軸,這會使開發者看起來就像新手一樣。

如果要避免此問題,請維持一個 .container 或 container-fluid 在外層(無論你有多少個 .row,都僅需要一個在最外層)

<div class="container"><!-- 請維持一個 container 在最外層 -->
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col-4"></div>
        <div class="col-4"></div>
      </div>
    </div>
  </div>
</div>

如果網頁有多個區塊,則可以在每個區塊都有獨立的 .container,不一定只用一個 container 包覆全網站。如以下範例有多個區塊時,也可以有各自的 container 或 container-fluid,讓每個區塊的容器有更多的變化。

<section class="container">
  ...
</section>
<section class="container-fluid">
  ...
</section>
<section class="container">
  ...
</section>

結語

Bootstrap 格線是很棒的格線工具,無論是在切版或網頁設計得格線教學,我都很推薦使用 Bootstrap 的概念,它是目前可行性優及泛用性廣的格線系統,但也為了達到此概念,其中加入了許多 “HACK” 讓這個格線能夠具有許多特性(如:負值的 margin 是為了多列呈現,在 Bootstrap 2 時的格線就不能換列)。

也因為這些 “HACK” 我們在使用 Bootstrap 格線需要更加小心,如果沒有正確對齊會造成畫面無法對齊,開發者也會花上許多時間為了修正這些沒對齊的項目,並產生許多不必要的樣式。


上一篇
手把手自訂你的 Bootstrap 樣式
下一篇
Bootstrap 5 格線的運作原理
系列文
前端常見問題攻略30

尚未有邦友留言

立即登入留言