Bootstrap是一款非常優秀的移動端優先的前端架構。我甚至認爲，那些做back-end的碼農，前端只要掌握HTML5/CSS3， JS/JQ和bs就行了。bs的學習也非常快，過一遍official documentation就好了，以後使用的時候來老地方copy就行了。
先說說我對bs的理解：
- 首先bs基本上都是已經給你寫好的css，js，你下載下來離線引用，或者直接使用CDN也行。
- CSS有所謂的優先級規則，優先級高的樣式會覆蓋優先級低的樣式，這就是爲什麼我們不推薦一個頁面中使用多個前端框架，因爲多個框架之間的css可能會產生非常複雜的覆蓋作用，這樣我們的樣式將變得混亂。
- 在bs已經把css和js封裝的情況之下，我們還可以使用各種編輯器的bs4補全插件，讓插件爲我們自動生成代碼，這時候我們只需要記住一些特別的類的就可以了。
這篇博文，就是在vscode編輯器上，使用plugin排名中的第一名：Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets（對，這一長串都是一個插件的名字）進行bs的學習。
需要注意的是，這篇博文主要是基於插件的，我會刪除一些插件中基本上沒什麼效果，或者bs4本身就不用記的內容（比如h1等標籤樣式的重寫）來儘可能地減少文章的大小。如果你發現你需要的元素或者樣式不再你的記憶宮殿中，你大可以直接去官網上查詢。
下面就讓我們開始吧！
零. 基礎操作
我們可以直接用插件引入我們必要的CSS和JS文件（截止bs4版本，我們還需要提前引入jq，但是bs5就不需要了，bs5都用了原生js進行了重寫），那就是鍵入b4-$。
一. 內容之表格
表格的話，該插件主要有兩種補全方式，我比較推薦b4-table-special的縮寫補全。
除了補全中給到的類以外，其餘推薦的類有：
- table-hover: 給相應的行提供一個鼠標懸停效果的樣式。
- bg-info, bg-success, ..等： 給相應的行或者單元格指定背景顏色。
二. 組件之alert
我關注的alert一共有兩種：一種是dismissable的，另一種則是非dismissable的。
這兩個一個可以用b4-alert-default實現，另一個可以用b4-alert-closable和b4-alert-dismissable實現（這兩者的區別就是是否添加一個script，我個人認爲可以記爲同一個）
該插件對於這個alert的功能支持非常完全，官網上除了dismissable這個屬性以外，還有一個在alert中添加額外內容的，這個也被實現了，那就是b4-alert-additional-content。
三. 組件之badge
這個也比較好用，看插件中的名字差不多就知道各種badge的樣式了。這裏不再贅述。
四. 組件之breadcrumb
傳說中的麪包屑導航，建議用b4-breadcrumb-list進行補全，很完善。
五. 組件之button
插件裏提供的竟然比官方文檔的還要豐富。。那這裏只提官方文檔的好了：
- outline: 改變按鈕的輪廓，建議使用b4-button-outline補全。
- radio: 單選框，建議使用b4-button-radio進行補全。
- checkbox: 複選框，建議使用b4-button-checkbox進行補全。
其它推薦的樣式：btn-info, btn-success等改變顏色的樣式。
六. 組件之button-group
這個就是把多個按鈕組合起來，不過一般的網頁已經有位於頂部的nav-bar和位於底部的paging了，一般而言留給button-group的只有側邊欄了，我們可以把button組合起來構成我們側邊欄的導航。
建議使用b4-bgroup-dropdown-verical進行補全，效果如下所示：
六. 組件之card
card是b4新加的內容，我們選擇的插件對card的實現也非常全面，card的效果真的非常多，這裏由於篇幅原因不會詳細地展開，可以直接去官網上找你相應的例子，card大概長下面這個樣子：
七. 組件之carousel
大名鼎鼎的輪播圖，但是這個插件支持的輪播圖很有限，如果你要照抄輪播圖的話我建議你直接去官網上抄demo。
但是很多時候因爲兼容性原因，我們都是直接手寫原生js實現輪播圖。
八. 組件之collapse
組件無非就兩種情況，一種是並列按鈕，一種是手風琴式。
並列按鈕建議用b4-collapse-button來補全，手風琴內容建議用b4-collapse-default補全：
九. 組件之dropdown
dropdown的內容屬實有點多啊，一般而言，dropdown都是直接配合button使用的：b4-dropdown-btn
如果要按鈕和下拉分裂的話，使用b4-dropdown-split。
如果想要dropdown中有豐富的文本內容的話, 使用b4-dropdown-default。
常用的就這麼幾個，但是官網上還有更多，比如對齊，比如下拉框改成上拉框和左拉框，這些都很重要，建議直接去官網找。
十. 組件之form和input
這個form和input真的太多了，但是其代碼都比較簡單，補全裏有非常語義化的表示。甚至不適用補全也可以。
十一. 組件之list-group
list其實代表着的是多個重複元素的排列，插件裏的補全有：
- b4-list-custom：你可以在你展示的列表中顯示你的自定義的內容。
- b4-list-badge: 就是在你列表的右側添加一個badge，可以類比Luogu的難題數量。
- b4-list-button: 這個就是b4-bgroup...
十二. 組件之media-object
這個我感覺用得不多，以後再看八：
十三. 組件之modal
這個模態框就是你平時alert出來的方框，這個官網上的文檔介紹得也滿詳細的。可是插件提供的樣式卻異常的少。
提供的三種樣式，基本上彈出來的模態框都差不多，都已經給你寫好了footer, body和header。
十四. 組件之nav
官方插件裏似乎沒有對膠囊式導航的實現，這個得自己去官網拉。除此之外，插件實現的功能有：
- 居中的導航：b4-nav-a
- 帶dropdown和disabled的：b4-nav-complete
- 用li實現的居中導航: b4-nav-li
十五. 組件之nav-bar
nav-bar就是大家熟知的導航欄，一般而言位於頂部，插件裏提供的導航欄一共有兩種，一種是複雜版的，有dropdown，input和search，還有一種就是簡約版的，就是普通的nav-bar。
這兩種我推薦使用b4-navbar-default和b4-navbar-minimal進行補全。
十六. 組件之pagination
pagination就是分頁，這裏我用得直接就是b4-paging-alignment了。
十七. 組件之popover
popover就是在在點下按鈕的時候給定提示，這個需要自己初始化，詳情請見官網。
十八. 組件之progress
進度條部分，插件裏實現了兩種進度條，一種是最樸素的，只有顏色的，推薦用b4-progress-default實現，另一種是稍微炫酷一點的，帶移動的條紋，推薦使用b4-progress-striped實現。
十九. 組件之scrollspy
所謂滾動監聽就是會根據滾動的位置，自動更新導航條的目標，以指示當前窗口中處於活動的狀態。
由於可以滾動監聽的元素比較多，因此bs並沒有直接實現相應的組件，而是給你搭了個架子，所以我並不推薦用插件補全，大家可以直接去官網上查找。
二十. 組件之spinners
這個也是非常炫酷的CSS效果，但是插件裏竟然沒有實現，所以如果想要以下的效果的話，直接去官網找吧。
二十一. 組件之toast
toast的效果和模態框非常類似，所以插件裏也沒有實現。
二十二. 組件之tooltip
tooltip在使用的時候還要自己初始化一番，這個比較麻煩。建議直接看官網，另外，插件裏補全也只有b4-tooltip-default這一種。
