【學習筆記】快速建立漂亮的一頁式網頁 —— Bootstrap 套件不可不知的 7 大技能

何家慈 Chia Tzu Ho

更新於 2024/11/12發佈於 2022/11/13閱讀時間約 15 分鐘

本篇適合：
> 剛開始學習 HTML / CSS ，對基本語法有了解的人
> 想要快速建立一個一頁式網站，但對 CSS 仍無法很活用的人

初始設定與 Bootstrap 中文版網頁使用

在過去在大學期間擔任助教的過程，常常有人問「Bootstrap」是什麼？一來我也不是什麼前端工程師，我一時也不太知道要給予一個怎麼樣的答案。

你可以說他是一個「框架」、一個「套件」，但似乎沒辦法回答這個提問者的問題。

或許換個方式想，現在我可能會回答說：它是一個由專業設計師與工程師設計好的一套「工具包」。

也就是說，過去在 HTML/CSS 的學習階段，會讓初學者很痛苦的排版、顏色、按鈕、響應式網頁（讓網頁能在電腦、手機都能完美閱讀），這個工具包都幫你包好好，只要短短「一行」就能解決問題。

Bootstrap 官方有英文網頁，但是幸福的是，台灣有一個前端線上教學的公司「六角學院」早已為各個版本的 Bootstrap 進行完美翻譯，因此可以在這個網頁看到所有從頭開始的手把手教學。

（先不要衝動買他們的課程，這裡不是業配 xD）

首先點入首頁，我們必須先把 Bootstrap 的套件包引入，有兩種方法：

下載所有資源包：這招我覺得如果真的在進行大型專案時再用即可，否則如果還是在練習、或其實沒有要進行自定義 Bootstrap 的一些功能的話，個人覺得可以不必下載。
線上引用（初學者建議）：可以使用 CDN （什麼是 CDN）的方式線上引用。直接把頁面拉到最下方的「初學者範本」，把 code 直接複製下來。

基本環境設定好後，你就可以享用 Bootstrap 所有功能。
基本上，Bootstrap 就是掌握最關鍵的技法 ——「複製貼上」！

左方欄位列出所有 Bootstrap 寫好的功能，如果不清楚誰是誰，我建議先拉到「元件」的大分類，玩玩按鈕、表單、卡片，會開始知道為什麼 Bootstrap 這麼好用，這麼受歡迎！

基本上掌握一個概念：Bootstrap 的使用就是要讓使用者「減少寫 CSS」，通通以「class （類別選擇器）」直接引入相關的功能。因此，在沒有很多困難、自定義的調整的前提下，若徹底使用 Bootstrap 的網頁，應該 CSS 不會很多。因此才會快速生成「漂亮」的網頁。

舉例而言，如果想要製作按鈕，

只要到旁邊的選單尋找按鈕的頁面，然後選擇喜歡的按鈕款式，複製到自己的 HTML 專案底下，就完成囉！

<!-- 複製自：https://bootstrap5.hexschool.com/docs/5.0/components/buttons/#examples -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

不過切記，Bootstrap 提供都是「靜態功能」。意即，表單、按鈕等等都是做出「畫面」，而非實際真正能執行。（需要讓表單成為真正表單、按鈕成為真正的按鈕，需要結合其他技術。）

接下來，將介紹幾個使用 Bootstrap 不可不知的七大功能。

第一大功能：網格系統

如果願意嘗試、不怕困難的朋友，可以直接進入官方網頁看看。

首先你需要知道一個大概念：「先 container，再 row，後 col」

網格系統結構

code結構如下：

使用 Bootstrap 建立區塊時，需在外層先建立一個 container，而且是必須的（請盡量這麼做）！

使用 container-fluid 會延展整個視窗寬度。container 與 container-fluid 的差別是在視窗的左右是否留下一些空間。

接著要正式介紹網格系統。

所謂的網格系統，是指 Bootstrap 將整個版面切成 12 等分。用寫的有點難詮釋，直接上圖：

透過 column 與數字的排列組合，可以達成特定的排版樣子，不必再拘束於傳統排版 float: right 或更古早使用表格作為網頁排版的方式！

因為有 12 格，所以可以自行去組裝可能合適的大小分配。

這樣的排版技巧其實想法不必太死，除了 container 在最外圍（框住所有內容）外，row/col 的搭配，只要需要排版，基本上都可以直接疊加使用。例如在過去曾經經手過的案例中，我曾經在 card 內增加了 row/col 系統。

簡而言之，他可以順利的幫你做好左右欄的排版。而在現在這個「響應式網頁」的時代，大家都使用手機觀看網頁，這樣的寫作方式，Bootstrap 也幫忙相當無痛的進行良好的排版。

如果要調整更細節、因應各種手機寬度產生適合的網頁視覺，就要介紹接下來的部分。

斷點與響應式網頁

在這個 mobile-first 的時代，基本上你不再只能單純製作電腦版網頁，而是手機版、電腦版等適應各種視窗的網頁，都應該要能舒服閱讀。

過去傳統的網頁設計，需要寫大量的 @media 去依照各個不同類型的視窗，寫下最適合的元件設計。初學者碰到響應式網頁，需要花加倍的時間思考應該要怎麼設計。

Bootstrap 最大最大的好處，就是把「響應式網頁」簡單化。

Bootstrap 提供一個捷徑，只要簡單在 class 上作標註，就可以為你設定專屬的響應式網頁樣態。

這裡要介紹一個概念：「斷點」。

我們先從網頁版思考，參照下圖。當我先把視窗最大化，然後慢慢從右邊將視窗拉窄，畫面會漸漸的變越來越窄，從電腦版頁面轉變為手機版的寬度。而「要在哪個視窗寬度切換不同的畫面模式」，這個寬度就稱之為「斷點」。

斷點圖示

上圖以 md 為例，md 即 medium。

當我使用 col-md-6 即代表 column 想要以「medium」的方式進行斷點，根據 Bootstrap 手冊，medium 斷點是 width: 768px。

也就是說，若低於這個寬度，他會以手機版方式排列，也就是原先是「左右排」，會變成「上下排」，讓視窗不要那麼的擠。

以此類推，幾乎大部分的元件都可以這樣使用！

目前 Bootstrap 提供數種預設的斷點：xs、sm、md、lg、xl、xxl。可以根據不同的載具進行設計。

排列系統（Flex 系統及 Box sizing）

Flex

這是我最常用的功能之一，雖然這項帶來的方便性其實並沒有到非常大，因為與 HTML 與 CSS 寫作幾乎相同，但如果有寫作強迫症的人，或許 Bootstrap 的寫法會帶給你更多方便。

如果想先學習 Flex 在 CSS 中的設計，可以先參考六角學院的教學。

另外，國外有一個flex floggy 網站，透過遊戲帶大家了解什麼是 Flex。

建議認真了解原先的 flex 系統後，那 Bootstrap 其實一模一樣，且沒特別簡化。唯一的差別是原先程式碼寫在 CSS 代碼中，Bootstrap 直接定義在類別選擇器（class）。
例如：傳統在 CSS 檔案中寫下「justify-align: center」會變成直接在 HTML 特定位置寫下「class="justify-align-center"」，以此類推。

記得在使用這些 align 功能時，皆是要在 display: flex 下達成，若以 Bootstrap 去定義，只要在 class 上打 d-flex 即可（class="d-flex"）

<div class="d-flex justify-content-center"> 我這區塊想置中 </div>

Box sizing

Box sizing 觀念是要處理特定區塊的邊界問題。

如果打開 Google chrome的檢查工具，可以看到都會非常清楚圖示給使用者每個區塊所對應到的邊界。

邊界分為三種：margin、border、padding。

簡要的區分方式網路上有非常多教學，我個人會粗分：margin 就是「向外推的邊界」，padding 就是「向內推的邊界」。（待會後面會圖示給大家作為範例。）

在 Bootstrap 中，若想要調整 margin，可以使用「m」這個關鍵字，要調整 padding，可以用「p」這個關鍵字。

至於上、下、左、右，分別為「t」、「b」、「l」、「r」（即top、bottom、left、right），同時調整左右為「x」（x軸水平調整），上下為「y」（y軸垂直調整）。

接著，過去在寫 HTML 時可能會很在意到底要思考 box 外推或內推多少 px（pixels），然而在 Bootstrap 中，已經幫你預設好五種距離 (1, 2, 3, 4, 5)，數字越大，代表留白程度越大。

其實單純看上面的敘述，應該會蠻霧煞煞的。我們直接透過實例來了解。

舉例而言，如果我希望一個物件上方留有 padding：可以用「pt-3」，p 代表 padding、t 代表 top、3 代表留白的程度（3 僅為示意），以此類推。

若我希望一個物件下方留有 margin：可以用「mb-3」，m 代表 margin、b 代表 bottom、3 代表留白的程度（3 僅為示意）。

若我想要在一個物件的左方與右方留有 padding，可以直接「px-2」，x 代表左右。

若我想要在一個物件的上下左右，皆預設有 margin，可以直接「m-2」。

而到底 margin 或 padding 分別得到怎麼樣的效果，以下方圖示展示給大家：

以上如果還看的霧煞煞，可以觀看官方教學：https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/#margin-and-padding

元件：卡片

元件其實最不應該介紹 xD，因為 Bootstrap 官方版面已經寫得超清楚超簡單：

而我最常用的就是卡片，官方範例會放很多像是產品介紹、人物介紹這類的排版樣式，我覺得不一定需要拘泥於那樣，基本上我都視為它是一個「漂亮的長方框框」（還外帶圓角），因此只要需要框框，我都會拿 card 來用。

例如我在實驗室的蛋白質比對搜尋網站，表單就是使用 card 排版。

通用類別：文字與顏色

文字官方範例：

顏色官方範例：

以文字而言，我超級常用 text-center、text-start、text-end，Bootstrap 5 的粗體、細體、極細體也蠻好用的。

以顏色而言，是 Bootstrap 比較劣勢的地方，他預設了幾個顏色，如果你並沒有太多顏色需求，可以直接用它給予的顏色，不然就是搭配 CSS 著色。

根本解決問題的方式，就要閱讀 Bootstrap「自定義」章節，去用 SCSS 方式修改底層變數，歡迎進階使用者上網查詢囉。（或之後有空我再來寫一篇 xD）

寫在最後：版本需注意

日前 Bootstrap 發表了第 5 版，第 5 版也是目前最通用、最穩定的版本，在閱讀相關文件（無論是中文還是英文版）時，需注意右上角的版本。第 4 版與第 5 版就有一些功能（元件）上的差別（但基本上像斷點、網格系統這兩版本都相同）。

到底是哪一個版，除了網站有標註外，網址也可以看出端倪：

4.2版本
https://bootstrap.hexschool.com/docs/4.2/components/alerts/

六角學院的中文編譯網站，如果是第五版，除了網址會標版本外，開頭也是「bootstrap5」，提供使用者清楚辨識。

5.1版本
https://bootstrap5.hexschool.com/docs/5.1/layout/breakpoints/

另外，不確定會不會修好這個 bug ，但我發現有時候六角翻譯的 Bootstrap 的網頁搜尋功能使用中文搜尋會失效（找不到東西），但使用英文是正常的！簡單注意一下即可。

結語

我接觸 Bootstrap 其實是先從 Bootstrap 4 開始，當時為了實驗室要重刻一個蛋白質比對搜尋網站，因此被指派負責網頁前端設計。當時與實驗室一位學長聊了以後，決定全數使用 Bootstrap 開發，幾乎三天三夜的學習與實作，在我沒閱讀任何教學的情況下，手把手教會了我（超感動），以至於後來我超愛用 Bootstrap。

所以 Bootstrap 對於新手真的是救命包。但如果要養成一個完整的前端學習，當然只學 Bootstrap 會讓許多觀念無法建立好 xD，因為 Bootstrap 幫你做太好 xDDDD。

回到 Bootstrap 本身，有時候初學者會把 HTML/CSS 跟 Bootstrap 混用，當你要用 Bootstrap 時，其實很多功能都可以更輕鬆的完成，不必脫褲子放屁 (?)（意即既然都使用 Bootstrap 了，就用到底）。

基本上你想要用 HTML/CSS 完成的功能，九成九 Bootstrap 都有。

例如，在自己新聞所的學習中常常用到 100vh 的功能，為了先展開一個視窗高度的版面。你確實可以直接用 height: 100vh 沒問題，但其實 Bootstrap 也早有功能可用，直接在 HTML 的類別選擇器中打下 class="vh-100" 就完成一模一樣的功能了。

希望這簡短的 summary 與經驗談，可以幫助一些朋友！