本篇適合：
> 剛開始學習 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 與經驗談，可以幫助一些朋友！
進入業配環節：哪些免費課程可以看
免費（六角 Youtube）
付費（六角）
個人覺得免費資源已經非常夠用！
