這篇文章是給那些從沒有聽說過Bootstrap或雖然有所耳聞，但還知之甚少的讀者們準備。如果您已經是熟練的Web前端開發者並且對Bootstrap UI框架有所瞭解，那麼請略過本文。
另外，如果您對HTML、CSS、Javascript這三個名詞，有2個以上不認識、不瞭解，那麼本文也不適合您，您可以期待我對這些前端開發基礎知識另外的專題分享文章。
閒話少敘，開始正題。什麼是Bootstrap?
什麼是Bootstrap?
Bootstrap官網
根據Bootstrap官網（https://getbootstrap.com）介紹，原文機翻如下：
Bootstrap是一個使用HTML，CSS和JS進行前端開發的開源工具包。使用我們的Sass變量和mixins、響應式網格系統、廣泛的預構建組件以及基於jQuery構建的強大插件，快速構建您的Web創意或完整的應用。
所以，簡而言之，Bootstrap就是一個Web開發框架，更準確說是一個UI框架——因為它的主要部分是基於HTML和CSS這些UI技術，並輔之以JQuery提供一些實現動效的特性。
也許您會問，這裡Sass是什麼，mixins又是什麼？
什麼是Sass
Sass是一種CSS的擴展語言，它引入了變量、程序語法，使您可以通過編寫Sass程序來生成CSS，相對於直接編寫CSS，Sass的好處在於更靈活更豐富的特性，可以編寫更復雜且更易於維護的CSS樣式庫。舉個簡單的例子，我們可以這樣編寫一條關於字體顏色定義的Sass代碼，我們的需求是通過修改顏色變量來改變字體的顏色CSS定義：
Sass的簡單示例
上面就是一段最簡單的Sass代碼，它與CSS非常相似，事實上，Sass最新版本支持直接編寫CSS樣式，在此基礎上又支持更多特性。上面這段Sass的意義在於，將顏色定義與字體樣式定義分離，提高了維護的效率和安全性（當然，在如此短小的示例代碼中，這個意義並不明顯，如果你要開發上千行的龐大樣式庫，Sass的價值就能凸顯出來了）。
需要注意的是，瀏覽器並不能直接渲染Sass代碼，我們需要把Sass源代碼編譯為CSS才可在網頁中使用。如果您需要了解更多Sass的信息，可以查詢相關資料或等待我另找時間寫幾篇Sass的分享文章。
那麼mixins又是啥？
什麼是Sass中的mixins？
mixin怎麼念？不是迷信！
請跟我讀：妹—可—似因！
在Sass中，一個很重要的概念是mixins（混合器），是Sass的一個很特別的語法特性。它的作用在於把複雜的Sass程序中一些
作用相似的代碼段，獨立成模塊，供其他代碼重複調用。以下是一個簡單的示例：
從這個例子可以看出，mixins非常強大，利用它（以及Sass的其他特性）可以編寫出非常複雜的CSS。
Bootstrap的響應式柵格系統
Bootstrap的另一個主要特點是響應式柵格系統（Grids）。實際上，這套系統是通過CSS實現的一套頁面佈局規範。
柵格系統的基礎邏輯，是把一個網頁——無論是什麼終端——先分割成12列的空間，而頁面中的內容容器，可以根據定義佔用其中若干列的空間，然後在此佈局的基礎上，各個容器再有至少跨越5個不同屏幕寬度下的斷點定義，以及基於彈性盒（Flex）技術的一些CSS工具類輔助，這樣就構成了可以自適應任何終端尺寸的響應式網頁架構。
我不想在這篇文章中一下子說得太深，畢竟在手機上閱讀往往是有限的碎片時間，那麼我會盡量在有限的篇幅中讓您充分理解消化有限的信息，我們可以在後續多篇文章中逐步把更多東西講清、講透。
那麼，對於Bootstrap的柵格系統，以下可以看一個簡單示例：
柵格系統基本示例
這段代碼的渲染效果如下：
Bootstrap就是利用 container > row > col-* 這樣的三層結構來實現一個標準的響應式容器。這裡我們要重點講的，是 col-* 這個CSS工具類，它有以下最基本的寬度變型：
.col-1, .col-2, .col-3, .col-4, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12
就拿 .col-2 來說，看看它的CSS定義：
2列柵格的CSS
這個類，表示對應的元素，佔據一行的1/6寬度。
col-* 如果沒有後綴，單單一個 .col 表示最大寬度100%。另外，除了明顯設定寬度比例，你還可以設定對應的屏幕斷點（寬度範圍），它們有：
.col-sm, .col-md, .col-lg, .col-xl
它們分別表示在各自的斷點及以上屏幕寬度時，最大寬度為100%（撐滿）。舉例來說：
上面這個 div 容器會在屏幕為xl寬度（≥1200px）時，自動撐滿屏幕，否則的話就縮小為1/6屏幕寬度。當然，我們還可以給 .col-xl 這個類增加更具體的定義，如： .col-xl-8 表示在屏幕大於等於1200px時，該容器佔據8/12的寬度。你可以自己試一試這個例子，這個div會在xl斷點時佔據8/12寬度，否則撐滿全屏：
這裡給出完整的所有斷點的柵格類定義：
所以你可以把這5個基本前綴，跟上1-12的柵格比例，以及多個類的組合，可以設計出非常複雜而靈活的柵格佈局。限於篇幅以及本文主要是概念瞭解的作用，更多的實踐用法和示例，您有興趣的話，可以有針對性找一些專題資料來深入研究。
而本文在這裡更想討論的是Bootstrap的上述柵格系統究竟有什麼作用？
簡單說，柵格系統的作用就是為了在不同屏幕寬度的終端上，同一個網頁可以有不同的表現，從而達到所謂響應式的設計需求。那麼，Bootstrap柵格系統是如何做到這一點的呢？由於上述5個斷點的存在，加上 .col-* 的柵格類的作用，瀏覽器可以在不同斷點時渲染出不同排版的內容，例如一般的桌面電腦總是運作在 xl 斷點（≥1200px），而很多手機是運作在 sm (< 576px)，如果您想設計一個在電腦上一行6個內容塊橫向排列，在手機上則改為豎向排列的頁面——這是一個最常見的響應式設計需求——就可以用以下HTML代碼輕易實現：
上面示例的渲染結果，在PC上：
PC端自動橫向排列
在手機上：
手機端自動豎向排列
柵格系統的應用，遠比上述例子要複雜、強大得多。通過Bootstrap的柵格系統，我們可以構建出豐富多樣且完美適應於多終端的現代Web頁面。因此，如果您有興趣深入瞭解的話，請自行百度查找相關教程、資料，研究更多實例來徹底掌握這個強大的系統。
Bootstrap的特點除了響應式的柵格系統外，還有就是它的五花八門、非常實用的CSS工具類，下面簡單介紹一些常用的工具類。
場景色工具類
在實踐中，我們經常會需要做一些不同業務場景下的顏色效果，例如用紅色來向用戶發出某種錯誤提示，用黃色給出提醒警示，用綠色表示操作成功等等。
Bootstrap框架提供了一套全局定義的、與其他組件結合的場景色工具。單就顏色來說，有以下這幾種：
- primary ：主要色
- seconbary ：輔助色
- info ：信息色
- success ：成功色
- warning : 警告色
- danger ：危險色
- light ：亮白色
- dark ：暗黑色
- link ：無色，用於鏈接
下面用按鈕組件來展示上述場景色效果：
各個場景色的按鈕
這些按鈕的HTML代碼：
注意，場景色該如何使用呢？有些人會把它們當做普通的顏色來用，其實專業的方式不能這麼做。所謂場景色，應嚴格用於相應的交互場景，而最多用的其實只有2個顏色：primary 和 secondary 主要色和輔助色兩個，其中，主要色承擔了整個項目的色彩風格的重任。
從設計審美的角度，一個網站項目，不建議使用過多的顏色，一般來說應由設計師確定一個主色調，再搭配一個輔助色用於內容的主次顯示。更好的設計，會給主色調增加深淺不一的輔助色、第二主色。對於Bootstrap框架來說，可以把輔助色 secondary 設置為與主要色同色系較淺，或再新增一個更深的第二主色。
第二主色可以通過在Sass中給Bootstrap的場景色系添加一個 default 色來實現。
以下是一個配色示例：
一個配色示例
配色的實踐應用
也許有人會問，如果我的項目的主色調不是藍色，而是紅色，或灰色，或其他顏色，怎麼辦？這就涉及到Bootstrap的一個重要的應用方法：自定義。
在Bootstrap的Sass源碼中，有全套的場景色變量定義，你只需修改這些變量再重新編譯 ，即可立即生成全新的場景色系的整套CSS庫，所有運用到場景色的組件，全都已經更改了顏色。
上圖中顯示的是Bootstrap中有關場景色變量的部分。整個框架中有很多組件都有場景色的變型，因此一旦修改了場景色變量，框架中所有和場景色有關的部分都會隨之自動更改。
外間距和內填充工具類
如果你經常寫CSS，那麼對於 margin 和 padding 這兩個CSS屬性不會陌生，也一定了解如果
過於隨意的設置內外間距，對於頁面排版可能就是一場災難，各位錯位和凌亂以及反覆調試會讓經驗不足的前端程序員陷入996的深淵....Bootstrap對DOM元素的外間距和內填充做了很好的規範，提供了兩個強大的工具類：
m-* : 對應 margin 屬性
p-* ：對應 padding 屬性
我們先來說 m-* 工具。它的後綴是0-5的整數，以及“auto”，分別表示 .25rem 的6個不同的整數倍距離。分別是：
而p-* 也同上，對應的是padding的6個距離值。
對於一般的頁面佈局，元素之間的距離（或內部填充距離）最常用的也就在這5個範圍內了。如果有特別小或更大的距離需求，還可以自定義。
說到自定義，Bootstrap中很多設置都在其Sass源文件中可以進行修改，例如上述內外距離的單位長度是1個rem，Sass中表示為 $spacer 這個變量，您可以修改 $spacer 變量值（如 $spacer: 16px），來獲得個性化的距離工具。
m-* 、p-*還有6個變型，分別是：
提供在不同方向上的內外間距。它們的CSS定義的例子是：
另外，m-* 和 p-* 還有負值的版本，以及在5個斷點的響應式版本，如： mt-n1 和 mt-md-* 這樣的形式。因為並不常用所以就不贅述了，有興趣的可以找一些資料做延伸閱讀。
其他工具類
Bootstrap的工具類實在非常多，這裡不可能一一介紹，以後或許可以分專題來逐個介紹分享。這裡先列舉幾個常用的。
- 顯示屬性工具：d-* 表示CSS的 display 屬性。用法如：d-block, d-inline 等，也有響應式版本，如 d-lg-block。
- 陰影工具：shadow-* 表示 CSS的 box-shadow 的一個特定設置。根據陰影的從小到大有四個類： shadow-none, shadow-sm, shadow, shadow-lg
- 邊框工具：border-* 表示 CSS的 border 的一個特定設置。根據邊框的方向，可以有 border-left 、border-right、border-top、border-bottom，而根據邊框的場景顏色，還可以有 border-{theme-color} 如 border-primary 、border-warning 等幾個工具類可用。
- 懸浮工具：float-left 和 float-right 這兩個類對應的是CSS中的： float:left; float:right兩個屬性。
... 還有很多很多...
總之，Bootstrap的工具類多到足以滿足絕大多數場景和需求下的web設計，無論是中後臺的簡潔設計還是門戶的炫麗設計，都能應付。萬一有特殊需求，您還可以使用Sass來自定義屬於您自己的工具類。
Bootstrap預製組件
實際上，Bootstrap被廣大的前端開發者喜愛的最主要原因，或者說唯一的原因，是它龐大的組件庫。Bootstrap官方提供了非常全面的組件庫，同時，無數的開發者和公司企業，也都基於Bootstrap製作了擴展的組件庫。
這些組件，大多數是基於CSS的，其中少部分還結合了Javascript，提供了JS的接口。
對於不熟悉組件概念的朋友，這裡稍微講講什麼是組件。
組件，就是把一些最常見的web複合元素，抽象成一套獨立的、可複用的HTML代碼，並由框架的預製CSS工具類、Javascript自動初始化來支持，方便開發者開箱即用。組件通常有一個基本形式，以及若干高級的變型，以適應多種應用需要。
還是先舉個例子吧，下面是一個常見的下拉菜單：
一個常見的下拉菜單，展開的樣子
這就是用一個組件實現的效果。它的HTML代碼是：
一個下拉菜單的HTML源碼
需要注意的是，上述代碼，如果脫離 Bootstrap 框架是無法呈現出對應效果的，換言之，這段代碼必須依賴Bootstrap所包含的CSS和Javascript的基礎庫支持。
那麼類似這樣的組件有多少種呢？
我們來粗略統計一下，大概有以下這些種類的組件，其中有些還是複合組件，即組件中嵌套其他組件，另外，有些是純CSS組件，有些則需要JS庫的支持。
Bootstrap的組件種類
警告框（Alert）：用於提示信息、彈出提示。
徽章標貼（Badge）：用於一些較小的提示、反饋，如最新消息數。
麵包屑導航（Breadcrumb）：用戶顯示當前內容的網站層級路徑，做導航用。
按鈕（Button）：這個不用多說了。
按鈕組（Button Group）：將若干按鈕組合成一個獨立的元素，常用於如編輯器的工具欄等。
卡片（Card）：一種特別設計的容器組件，可以包含多種形式的圖文內容，且便於陣列布局。適用於數字產品展示等。
圖片輪播（Carousel）：常見的圖片左右輪流滾動展示的效果。
摺疊（Collapse）：控制元素摺疊/展開的效果，多用於手風琴列表（如Q&A）。
下拉菜單（Dropdown）：這個不用介紹，都懂。
表單控件（Form）：Bootstrap提供了更規範實用的表單控件。
複合文本框（Input Group）：經過加工的一種組件，將多種元素和文本框結合，提供複雜的交互效果。
列表組（List Group）：經過設計的多用途列表組件。
媒體列表（Media Object）：專用於圖文混排內容列表的組件。如論壇的帖子列表。
對話彈出窗（Modal）：點擊彈出的對話窗組件，可定義多種位置和大小。
導航列表（Nav）：多用途的欄目導航列表。
複合導航欄（Navbar）：可用於網站全局導航，並可容納多種內容元素的導航欄。
翻頁（Pagination）：用於數據查詢結果的翻頁導航組件。
彈出式懸浮框（Popover）：點擊或懸停可浮現的懸浮容器組件。多用於交互提示。
進度條（Progress）：以百分比或自定義尺度來表示某個進程的進度。
數據載入等待器（Spinner）：以一種旋轉的條狀圓弧來表示正在等待數據載入和刷新。
側邊通知框（Toasts）：可以在頁面側邊或其他位置浮現並自動消失的通知組件。
懸浮提示（Tooltips）：當鼠標懸停或點擊時，立刻浮現需要的簡短信息。
以上這些還只是Bootstrap官方提供的常用組件，如果是一般的小型Web項目，這些組件已經足夠用了。開發者僅需要在Bootstrap官方網站的組件文檔中，複製某個組件的代碼，粘貼到自己項目中（需要實現加載好框架的引入庫文件）即可使用。
小結
本文僅僅是對Bootstrap框架的簡單介紹。還有太多細節和特性，沒有做深入討論，也是一篇文章的篇幅難以實現的。因此我會在後續的寫作計劃中，逐個對這個偉大的前端框架各個部分展開詳細討論，同時也會加入我自己的一些經驗與大家交流。
Bootstrap目前最新版本是4.3.1，我注意到網上有一些朋友推薦的文章多是老版本，這也請您留意。
本文是我的Bootstrap框架系列寫作計劃的序章，之後會陸續把框架的全部組件、工具逐個單篇介紹分享。請點擊我的頭像查看我的全部文章。
最後，限於本人的水平實在有限，文中難免有錯誤或疏漏之處，誠懇歡迎大家留言指正！
一入前端深似海，回頭是岸舟已沉！
閱讀更多 Bootstrap框架全解析 的文章
