Bootstrap - 欄位：輕鬆打造響應式佈局

你好，有抱負的網頁開發者！今天，我們將深入Bootstrap最強大的功能之一：欄位。作為你鄰居的電腦老師，我很興奮能夠帶領你進行這次旅行。相信我，在這個教學結束時，你將會像專業人士一樣打造響應式佈局！

如何運作

在我們深入細節之前，讓我們先了解基本概念。Bootstrap的網格系統基於12列佈局。把它想像成將一個披薩分為12片 - 你可以自己吃掉它們（一個全寬列）或者與朋友分享（多個列）。

以下是一個簡單的例子來讓我們開始：

<div class="container">
<div class="row">
<div class="col-sm-4">欄位 1</div>
<div class="col-sm-4">欄位 2</div>
<div class="col-sm-4">欄位 3</div>
</div>
</div>

在這個例子中，我們在小屏幕和更大的屏幕上創建了三個等寬的欄位。col-sm-4類表示“在小屏幕上佔據12列中的4列”。這就像說，“請給我那個12片披薩中的4片！”

對齊

現在我們有了欄位，讓我們學習如何對齊它們。這就像在房間裡擺放家具一樣 - 你希望一切看起來都是剛剛好！

垂直對齊

要垂直對齊欄位，我們在行上使用類：

<div class="container">
<div class="row align-items-start">
<div class="col">頂部</div>
<div class="col">頂部</div>
<div class="col">頂部</div>
</div>
<div class="row align-items-center">
<div class="col">中間</div>
<div class="col">中間</div>
<div class="col">中間</div>
</div>
<div class="row align-items-end">
<div class="col">底部</div>
<div class="col">底部</div>
<div class="col">底部</div>
</div>
</div>

在這裡，我們使用align-items-start、align-items-center和align-items-end來將我們的欄位分別對齊到行的頂部、中間和底部。

水平對齊

對於水平對齊，我們使用justify-content類：

<div class="container">
<div class="row justify-content-start">
<div class="col-4">一</div>
<div class="col-4">二</div>
</div>
<div class="row justify-content-center">
<div class="col-4">一</div>
<div class="col-4">二</div>
</div>
<div class="row justify-content-end">
<div class="col-4">一</div>
<div class="col-4">二</div>
</div>
</div>

這些類（justify-content-start、justify-content-center、justify-content-end）將我們的欄位對齊到容器的左側、中間和右側。

欄位折行

有時候，你可能在一行中有超過12個欄位單位。別擔心，Bootstrap會支持你！它會自動將多餘的欄位折到新行：

<div class="container">
<div class="row">
<div class="col-9">欄位 1</div>
<div class="col-4">欄位 2</div>
<div class="col-6">欄位 3</div>
</div>
</div>

在這個例子中，9 + 4 = 13，這超過了12，所以第二個欄位會折到新行。

欄位斷行

但如果你想要自己強制折行怎麼辦？這時候就需要欄位斷行：

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

<div class="w-100"></div>創建了一個100%寬度的斷行，強制下一個欄位從新行開始。

重新排序

排序類

Bootstrap允許你改變欄位的視覺順序：

<div class="container">
<div class="row">
<div class="col order-3">第一，但最後</div>
<div class="col order-2">第二，但第二</div>
<div class="col order-1">第三，但第一</div>
</div>
</div>

order-類決定了欄位的順序。這就像告訴你的欄位玩搖椅遊戲！

欄位偏移

偏移類

有時候，你可能想在欄位前添加一些空間。這時候就需要偏移類：

<div class="container">
<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>

offset-md-4類添加了一個等於4列的左邊距，將我們的第二個欄位推向右側。

在響應式斷點清除浮動欄位

當你的佈局在不同的屏幕尺寸之間變化時，你可能需要清除浮動的欄位：

<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>

在這裡，d-none d-md-block在小屏幕上隱藏斷行但在中屏幕和更大的屏幕上顯示它。

邊距工具

Bootstrap提供了邊距工具以快速調整間距：

<div class="container">
<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>

ml-auto類將第二個欄位推向右側，通過自動調整其左邊距。

獨立欄位類

最後，你可以使用沒有行包絡的欄位類來獲得更多靈活性：

<div class="container">
<div class="col-3 bg-light p-3 border">
.col-3: 寬度為25%
</div>
<div class="col-sm-9 bg-light p-3 border">
.col-sm-9: 在sm斷點以上的寬度為75%
</div>
</div>

這種方法給你對佈局的更多控制，特別是對於複雜設計。

這就是 Bootstrap 欄位的來龍去脈，各位！你剛剛學會了Bootstrap欄位的所有知識。記住，熟練來自練習，所以不要害怕嘗試這些概念。很快，你將會創建有會讓最經驗豐富的網頁開發者都感到羡慕的響應式佈局！

以下是我們所涵蓋的欄位類型的快速參考表：

類型	描述
col-*	基本欄位類（*可以是1-12）
col-sm-*	小屏幕和以上的欄位
col-md-*	中屏幕和以上的欄位
col-lg-*	大屏幕和以上的欄位
col-xl-*	超大屏幕的欄位
offset--	偏移欄位（*可以是sm, md, lg, xl）
order-*	重新排序欄位（*可以是1-12）

快樂編程，願你的佈局總是響應式的！

Credits: Image by storyset