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