Bootstrap - 網格系統：初學者的友好指南

你好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 Bootstrap 的網格系統世界。別擔心如果你從未寫過一行代碼——我會一直陪伴著你，一步步地解釋一切。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們一起來投入這個世界吧！

Bootstrap - Grid System

Bootstrap 網格系統是什麼？

在我們開始之前，讓我告訴你一個小故事。想像你正在試圖整理你的書架。你想要整齊地排列你的書，但它們都是不同的大小。這不是很讓人沮喪嗎？好啦，Bootstrap 的網格系統就像一個神奇的書架，能自動組織你的內容，無論它的尺寸或形狀如何！

在網頁設計術語中，網格系統是一個強大的佈局工具，它幫助你創建響應式和結構良好的網頁。這就像有一個個人的助手，完美地排列你的網頁內容，無論是在大型的桌面顯示器上還是小小的手機屏幕上查看。

基本範例

讓我們從一個簡單的範例開始，讓我們的腳濺濺水。這裡是 Bootstrap 網格系統的基本結構：

<div class="container">
<div class="row">
<div class="col-sm">
三個欄位中的一個
</div>
<div class="col-sm">
三個欄位中的一個
</div>
<div class="col-sm">
三個欄位中的一個
</div>
</div>
</div>

這裡發生了什麼？讓我們分解一下：

我們從一個 container 類別開始。這就像一個外部的盒子，包含一切。
在容器內部，我們有一個 row 類別。將這個類比作我們書架上的架子。
在行內，我們有三個 col-sm 類別。這些就像我們書架上的書，並排坐著。

如何運作

Bootstrap 網格系統基於12列佈局。為什麼是12？在網頁設計中，這是一個神奇的數字，因為它可以被1、2、3、4和6整除，給我們帶來很多靈活性！

這裡有一個視覺表示：

1	2	3	4	5	6	7	8	9	10	11	12
欄位	欄位	欄位	欄位	欄位	欄位	欄位	欄位	欄位	欄位	欄位	欄位

這些欄位可以組合起來創建更寬的內容區域。例如，你可以有一個佈局，兩個6個單位的列，或者三個4個單位的列。這就像玩積木遊戲！

自動佈局列

現在，讓我們來看看一些很酷的技巧。Bootstrap 可以自動為你處理列的寬度。看看這個：

<div class="container">
<div class="row">
<div class="col">
2個中的1個
</div>
<div class="col">
2個中的2個
</div>
</div>
<div class="row">
<div class="col">
3個中的1個
</div>
<div class="col">
3個中的2個
</div>
<div class="col">
3個中的3個
</div>
</div>
</div>

在這個例子中，我們沒有指定列的寬度。Bootstrap 足夠聰明，能夠平等地分配空間給列。這就像有一個機器人為你整理書架！

等寬度

想要所有列都具有相同的寬度，無論內容如何？簡單！

<div class="container">
<div class="row">
<div class="col">
3個中的1個
</div>
<div class="col">
3個中的2個（更寬）
</div>
<div class="col">
3個中的3個
</div>
</div>
</div>

即使中間的列有更多的內容，所有三個列都將保持等寬。這就像有可以伸展的書，總是完美地適合你的書架！

設置一個列的寬度

有時候，你希望一個列具有特定的寬度，並讓其他列自動調整。這樣做：

<div class="container">
<div class="row">
<div class="col">
3個中的1個
</div>
<div class="col-6">
3個中的2個（更寬）
</div>
<div class="col">
3個中的3個
</div>
</div>
</div>

在這個例子中，中間的列將佔據6個單位（一半的寬度），而其他兩個列將平等地分擔剩餘的空間。

變寬度內容

如果你的列需要根據其內容調整寬度，Bootstrap 也可以滿足你的需求：

<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
3個中的1個
</div>
<div class="col-md-auto">
變寬度內容
</div>
<div class="col col-lg-2">
3個中的3個
</div>
</div>
</div>

col-md-auto 類別讓這個列可以根據其內容增長或縮小。這就像有一本可以改變大小的書，以完美地放在它的鄰居之間！

响應式類別

現在，讓我們來談談如何讓我們的佈局響應式。Bootstrap 使用斷點來根據屏幕尺寸調整佈局。這裡是主要的斷點：

斷點	類別前綴	尺寸
非常小	無	<576px
小	sm	≥576px
中等	md	≥768px
大	lg	≥992px
非常大	xl	≥1200px
非常非常大	xxl	≥1400px

所有斷點

這樣使用這些斷點：

<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>

這個佈局將在所有屏幕尺寸上保持不變。這就像有一個書架，無論你從房間的哪裡看，它的樣子都不會變！

堆疊到水平

但如果我們希望我們的佈局根據屏幕尺寸變化呢？看看這個：

<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>

在小屏幕和更大的屏幕上，這些列將並排。在非常小的屏幕上，它們將垂直堆疊。這就像有一個書架，當空間緊湊時，可以變成一個書塔！

混合匹配

你也可以為不同的屏幕尺寸混合和匹配列大小：

<div class="container">
<div class="row">
<div class="col-12 col-md-8">.col-12 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
</div>

這個佈局在小屏幕上和中等屏幕及以上的屏幕上會有不同的樣子。這就像有一個可以變形的書架！

行列

想要快速創建等寬度的列？使用行列：

<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>

這會創建一個具有兩列的行，無論你有多少個 col div。這就像有一個書架，總是能將你的書以對的方式排列！

嵌套

最後但同樣重要的是，你可以在網格中嵌套網格：

<div class="container">
<div class="row">
<div class="col-sm-3">
第一級：.col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
第二級：.col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
第二級：.col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>

這會創建一個網格內部的網格。這就像在更大的書架內部有小書架！

好了，各位！你們已經踏入了 Bootstrap 網格系統的世界。記住，熟練是由練習而來的。嘗試玩轉這些範例，混合和匹配不同的類別，看看會發生什麼。在你知道之前，你將會像專業人士一樣創建美麗的響應式佈局！

快樂編程，願你的網頁總是井井有條！

Credits: Image by storyset