如何閱讀 Bootstrap 5 的文件
更新日期： 2024 年 11 月 12 日
Bootstrap 5 是一個很受歡迎的前端框架，提供了許多現成的 CSS 和 JavaScript 功能，讓我們可以快速建立響應式（隨螢幕大小變化的）網站。
熟悉官方文件的內容可以幫助我們更快上手。
接下來，我會一步步介紹如何閱讀和理解這些文件。
快速開始：了解安裝方式
在學習 Bootstrap 之前，首先要知道如何在專案中加入它的樣式和功能。
我們可以在文件的“快速開始”章節中，找到這些安裝方法。
常見的方式有兩種：
- 使用 CDN 引入：這是一個非常簡單的方法，直接在網頁的
<head>區域添加 Bootstrap 的 CSS 和 JavaScript 超連結。CDN 是指“內容傳遞網路”，通過引入 CDN，網站會使用網上最新版本的 Bootstrap，免去了安裝和更新的麻煩。 - 本地下載 CSS 檔案：如果我們需要進一步自訂樣式，這種方法就很實用。可以下載整份 Bootstrap 的 CSS 檔案，然後進行修改。比方說，我們可以更改網站的主色調，或刪除不使用的 CSS 程式碼，以減少網站的檔案大小。
這兩種方法各有優缺點。使用 CDN 很方便，不需要特別維護。
但如果要做細緻的設計，下載本地檔案就會更有彈性。
了解斷點：適應不同螢幕大小
Bootstrap 採用了“手機先決”的設計方式，也就是優先考慮小螢幕（像是手機）的顯示效果，再逐漸適配更大的螢幕。
我們可以在“斷點”這一章節中，學習如何應對不同裝置的螢幕大小。
以下是幾個重點：
- 斷點的概念：文件裡會介紹不同螢幕尺寸對應的斷點，主要分為：超小（xs）、小（sm）、中（md）、大（lg）、超大（xl）等級別。這些斷點讓我們可以針對不同裝置做出相應調整。
- 斷點的應用方式：透過這些斷點的 class 名稱（例如
.col-sm、.col-md），可以控制某些元件在不同螢幕上的顯示方式。例如，我們可以設定某個區塊在手機螢幕上寬度佔滿整行（.col-12），但在平板或電腦上只佔一半（.col-md-6）。
手機先決設計的好處
使用手機先決的設計方式，可以確保網站在小螢幕裝置上顯示得足夠清晰和整齊，然後再為較大的螢幕增添更多功能和排版細節。
容器（Containers）：頁面寬度的控制
容器（Containers）是 Bootstrap 佈局的基礎單位。
我們可以理解成一個頁面中承載內容的框架，所有的內容通常都放在容器內。
Bootstrap 提供了幾種容器類型，幫助我們根據不同的螢幕大小設定頁面的寬度。
在文件裡可以看到一個“容器對照表”，裡面列出了不同的容器和對應的寬度。
常見的容器類型
- 固定寬度的容器：我們可以使用固定的容器（例如
.container-sm、.container-lg等），這些容器會根據螢幕大小自動調整寬度。比如在小螢幕上會變窄，而在大螢幕上則會變寬，讓內容有更好的排版效果。 - 流體容器（Fluid Container）：採用
.container-fluid這個 class，可以讓容器在任何螢幕大小上都佔滿全寬，這在全寬頁面或需要滿版背景時非常實用。
根據頁面需求選擇合適的容器，可以更輕鬆地控制網站的排版效果。
網格系統（Grid System）：掌握排版佈局
Bootstrap 的網格系統是一套專為響應式設計打造的佈局工具，透過“行（row）”和“列（col）”的組合，可以靈活地控制排版。
基本網格結構
在使用網格系統時，每個頁面的結構通常由“行”和“列”組成：
- 行（Row）：
row元素相當於一行，用來組合一組“列”。 - 列（Col）：
col元素則是指這一行中的一個區塊。我們可以給每個col設定寬度比例（例如.col-4表示寬度佔 4 格），或使用自適應的 class（如.col-sm、.col-md），讓列的寬度根據螢幕大小變化。
這樣的設計讓我們可以很輕鬆地調整頁面的排版結構，並在不同裝置上自動適應。
延伸閱讀：CSS 格線系統簡介
Flexbox 調整大小
Bootstrap 的網格系統還內建了 Flexbox 功能，這讓我們可以更靈活地控制區塊之間的對齊、間距和位置。
例如，我們可以使用 justify-content-center 將元素置中，或用 align-items-center 將內容垂直對齊。
文件中列出了多種 Flexbox 語法的範例，可以參考來調整佈局。
延伸閱讀：CSS Flexbox 入門指南
巢狀結構的靈活性
Bootstrap 的網格系統也支援巢狀結構，也就是我們可以在 row 裡再嵌套一組 row 和 col。
例如，如果有一個大的區塊，我們可以在裡面再劃分為更小的子區塊，達成更複雜的排版需求。
這讓我們在設計頁面時更具彈性。
總結
閱讀 Bootstrap 5 文件時，可以按照以下順序進行：
- 從快速開始入手：學會如何安裝，了解 CDN 和本地下載的差別。
- 深入了解斷點：學會針對不同螢幕大小應用不同的 class。
- 掌握容器的用法：選擇合適的容器，控制頁面的整體寬度。
- 理解網格系統：透過
row和col進行響應式排版，並善用 Flexbox 語法和巢狀結構。
這樣一步步下來，可以更快理解 Bootstrap 的基礎功能，並靈活運用到實際專案中。