在上一篇裡我們有提到 Ant Design 是基於 React 前端框架的 UI Library、UI 框架，但並不是每一個公司或產品都有用到前端框架，那怎麼辦？Bootstrap 就能解決這個問題。

什麼是 Bootstrap ?

Bootstrap 是由 HTML、CSS、JavaScript 所組合而成的 UI 框架（你要說它是前端框架也行），是目前全球使用量最高的 UI 框架之一，它除了提供很完善的 component，也可以自定義組件和響應式網格佈局，讓工程師們在 Bootstrap 的規範下，依據自己的需求自定義想要的組件，更重要的是它每個 component 都符合RWD，JS 的互動效果也都寫好，我們只需要根據它的規範使用，不需要再自己寫互動效果。

如何設定？

1. 進到 Bootstrap 的官網。
2. 點擊右下角的「 Read the docs 」按鈕，進到 bootstrap 主頁。
   
3. 在左側選單找到「 Download 」並點擊，右側內容往下滑到「CDN via jsDelivr 」。
4. 找到下方的 CDN 連結 code，點擊右上角 copy icon，就可以把整串連結 code 複製起來。
5. 打開一個空白的 html 檔案，將 CDN 連結 code 貼在 head 裡面，就可以開始使用 Bootstrap 的 component 、layout 及其他功能了。
   

UI 介面說明

Bootstrap 的主頁介面有四大塊，分別是：

1. 上方 header 有五大區：Docs（文件 ）、Examples（ 範例）、Icons（ 圖標）、Themes（ 主題）、Blog （ 部落格）。最右側的月亮 icon，是 Light／Dark 的模式切換。
2. 側選單：依上方 header 的選擇而有所不同，我們最主要 focus 在 Docs ，Docs 的側選單裡面有：Getting started（入門）、Customize（客製化）、Layout（佈局）、Content（內容）、Forms（表單）、Components（組件）、Helpers（工具）、Utilities（共用）、Extend（擴展）、About（關於）。
3. 內容：依側選單的各個標籤而顯示不同的內容，主要說明組件的名稱、運作方法、範例，並且提供原始碼，工程師只要複製原始碼，貼到 html 檔案中，就完成了。
4. 錨點：該頁面的每個 item 的錨點，使用者滑到哪一個 item ，該錨點就會加粗字體。
   

如何開始？

我們以按鈕為例：

1. 點選 「 Docs 」頁籤，在左側選單找到「 Components 」。
2. 點擊 「 Buttons 」，右側內容區就會看到 Bootstrap 定義的按鈕說明
3. 找到 Html 頁籤右邊的複製 icon ，點擊 icon 複製按鈕的原始碼
4. 打開剛剛的 html 檔案，在 body 標籤項下貼上按鈕的原始碼
5. 以瀏覽器打開 html 檔案，就會看到所有按鈕

學習重點：

在 Bootstrap 裡我們要學習的重點：

1. CSS命名：
   bootstrap 的 CSS 命名方式是 OOCSS，也就是把結構與樣式分離，這樣的命名方式可以讓使用者一看就知道這個 CSS 是用在什麼元件上，例如：按鈕分主要、次要、完成（成功）、危險、警告、預設、亮／暗模式、底線，看了CSS 名稱就一目了然。我們在做 Design Token 的時候，也可以用此命名方式來處理，前端工程師在寫 CSS 的時候就可以與 Design Token 同步，在溝通上也更親民，不會有雞同鴨講的冏境。
   
2. CSS 推疊：
   bootstrap 的 CSS 採用推疊方式，先處理最原始的樣式，再根據功能、情境，推疊上去，例如：
   btn：基本按鈕樣式，btn btn-primary：主要按鈕樣式
   alert：基本警告樣式，alert alert-primary：主要警告樣式
   這跟 UI 的組合：原子→分子→組織→模板→頁面，有異曲同工之妙，我們在設計 Design Token 層級的時候，也可以參考。
   

看到這裡，有刻版經驗的設計師心裡一定會出現一個字詞「 TailWind 」，Bootstrap 與 TailWind 各有擁護者，但兩者在本質上是不同的，我們在這裡做一個比較：

站在巨人的肩膀能看得更遠、更廣，Ant Design 的 UI 設計風格，Bootstrap 的 CSS 命名規範，都是我們設計 Design System 的重要參考依據，接下來就可以正式進入 Design System 的範疇啦！（耶！撒花～），各位捧油們，明天見。

參考來源：https://getbootstrap.com