資訊專(zhuān)欄INFORMATION COLUMN
摘要：聲明聲明本篇內(nèi)容摘抄自以下兩個(gè)來(lái)源中文網(wǎng)感謝大佬們的分享。版本是全球最受歡迎的前端組件庫(kù)，用于開(kāi)發(fā)響應(yīng)式布局移動(dòng)設(shè)備優(yōu)先的項(xiàng)目。官方示例官方示例版本，官方還沒(méi)有中文教程，的中文教程倒是很齊全了。
本篇內(nèi)容摘抄自以下兩個(gè)來(lái)源：
感謝大佬們的分享。
這次想來(lái)講講一個(gè)前端開(kāi)發(fā)框架：BootStrap
BootStrap 目前已經(jīng)出了 4 個(gè)版本，每個(gè)版本都有對(duì)應(yīng)的官網(wǎng)教程，先來(lái)看看不同版本里的宣傳語(yǔ)：
簡(jiǎn)潔、直觀、強(qiáng)悍的前端開(kāi)發(fā)框架，讓web開(kāi)發(fā)更迅速、簡(jiǎn)單。--- BootStrap 2.x.x 版本
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。 --- BootStrap 3.x.x 版本
Bootstrap 是全球最受歡迎的前端組件庫(kù)，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
Bootstrap 是一套用于 HTML、CSS 和 JS 開(kāi)發(fā)的開(kāi)源工具集。利用我們提供的 Sass 變量和大量 mixin、響應(yīng)式柵格系統(tǒng)、可擴(kuò)展的預(yù)制組件、基于 jQuery 的強(qiáng)大的插件系統(tǒng)，能夠快速為你的想法開(kāi)發(fā)出原型或者構(gòu)建整個(gè) app 。 --- BootStrap 4.x.x 版本
那么，什么是響應(yīng)式布局呢？
通俗的理解，就是在不同的屏幕規(guī)格上能夠有不同的布局效果，比如在大尺寸屏幕上呈現(xiàn)多列的布局，在小尺寸屏幕上呈現(xiàn)不了這么多，可能就只剩下一列布局了。
那么，當(dāng)屏幕尺寸發(fā)生變化時(shí)，在不同屏幕規(guī)格上，應(yīng)該呈現(xiàn)怎樣的布局，一般是通過(guò)媒體查詢(xún) @Media 來(lái)實(shí)現(xiàn)，但自己在 CSS 中書(shū)寫(xiě)的話(huà)，需要處理較多工作。
所以，也可以選擇一些熱門(mén)的框架，由它來(lái)幫忙處理這些響應(yīng)式布局的工作，就像 BootStrap，但 BootStrap 功能不僅只有響應(yīng)式功能，它還內(nèi)置了很多預(yù)制組件等等，總之，很強(qiáng)大，雖然我還沒(méi)用過(guò)。
那就來(lái)學(xué)學(xué)如何使用，首先第一步肯定是安裝，我直接選擇最新版 4.x.x 系列的來(lái)作為入手了，舊版本沒(méi)去了解，有機(jī)會(huì)再說(shuō)。
將 BootStrap 引入項(xiàng)目中使用有兩種方式：
第一種方式最簡(jiǎn)單，直接在 HTML 文檔中聲明 css 和 js 文件來(lái)源即可，如：
Hello, world!
Hello, world!
使用 BootStrap，上面的 HTML 文檔模板是必須的，帶有注釋的都是在所有使用了 BootStrap 的頁(yè)面中需要引入的，需要注意的是，由于 BootStrap 一些組件依賴(lài)于 jQuery 和 Popper，所以需要引入這兩份 js，而且順序是 jQuery 先，Popper 后，最后再引入 BootStrap 提供的 bootstrap.min.js。
這是第一種方式，也是最省力的。
這種方式就比較折騰了，好處就在于資源文件都可以放在自己服務(wù)器上，無(wú)需依賴(lài)他人。下載資源到本地也有兩種方式，一是手動(dòng)到官網(wǎng)下載，下面三個(gè)地址：
下載 BootStrap
下載 jQuery
下載 popper
二是利用一些工具來(lái)下載，如 node.js 的 npm 命令來(lái)下載，打開(kāi)終端，進(jìn)入項(xiàng)目的根目錄：
npm init -y
npm install bootstrap
npm install jquery
npm install popper.js --save
如果執(zhí)行命令過(guò)程中報(bào)錯(cuò)了，自行去搜索解決吧，我是一次性成功，沒(méi)出啥問(wèn)題，都下載結(jié)束后，項(xiàng)目里的結(jié)構(gòu)如下，node_modules 文件夾里會(huì)有下載好的資源：
package.json 配置項(xiàng)如下：
這是我下載使用的版本。
好，不管是手動(dòng)去下載，還是接著 npm 下載，最后都需要將下載的資源放進(jìn)項(xiàng)目中，那么，下載下來(lái)的這么多東西，該怎么用，哪些是有用的？
可借鑒上面第一種方式里的 HTML 文檔，總共需要的其實(shí)就四份文件：
分別找下四份文件在哪，我的是在這幾個(gè)路徑下：
Hello, world!
Hello, world!
官方教程說(shuō)了，上面這是使用 BootStrap 的 HTML 模板，當(dāng)然也有進(jìn)行了解釋?zhuān)旅嫔晕⒄f(shuō)說(shuō)：
這是 h5 的 HTML 文檔的聲明，不加這句的話(huà)，可能會(huì)出現(xiàn)一些奇怪的樣式；
這行代碼表示的意思是，讓網(wǎng)頁(yè)可以自動(dòng)適應(yīng)當(dāng)前移動(dòng)設(shè)備的屏幕。
所以，使用 BootStrap 除了需要在 HTML 文檔中引入所需的資源文件外，別忘了加上上面兩個(gè)處理。
BootStrap 4.x.x 版本，官方還沒(méi)有中文教程，3.x.x 的中文教程倒是很齊全了。但 4.x.x 版本和 3.x.x 版本差別還是蠻大的，首先，4.x.x 選用 Sass 來(lái)作為預(yù)處理器，選擇 flex 來(lái)實(shí)現(xiàn)它的柵格布局系統(tǒng)等等。
反正，BootStrap 本質(zhì)就就是一個(gè)框架，封裝了一系列的屬性樣式、組件給開(kāi)發(fā)者使用，開(kāi)發(fā)者只要了解有哪些屬性樣式可以用、有哪些組件可以用、效果怎么樣、怎么用就可以了，至于這些，就只能是一步步在實(shí)際開(kāi)發(fā)中，一邊寫(xiě)一邊查文檔來(lái)慢慢積累了。
所以，本篇也就不會(huì)去列舉各個(gè)組件效果、屬性樣式效果、還一個(gè)個(gè)去說(shuō)明怎么用。
接下去的內(nèi)容，就是想著，能夠讀懂官方某個(gè)示例項(xiàng)目的代碼就足夠了。
選擇了官方的這個(gè)示例：Album
一步步來(lái)讀懂它的 HTML 代碼吧：
Hello, world!
About
Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.
看看效果：
目前的代碼里，我們完全沒(méi)有寫(xiě)過(guò) CSS，只在 HTML 文檔中，添加了
示例中使用的 class 很多，基本都是 BootStrap 封裝好的，我也沒(méi)想把所有用到的都搞清楚具體作用，只是想了解個(gè)大概，后續(xù)在使用中慢慢積累學(xué)習(xí)吧。
對(duì)于這個(gè)
回過(guò)頭看上面的動(dòng)圖， 看第一個(gè) 同層次的第二個(gè) 所以，頁(yè)面渲染后，其實(shí)有個(gè) 那么，點(diǎn)擊完按鈕后，第一個(gè) 看一下那個(gè)按鈕：，；
的 class：collapse bg-dark，collapse 是折疊的意思，所以第一個(gè) 就是一開(kāi)始被折疊的容器，而控制這個(gè) 折疊起來(lái)，也就是 BootStrap 提供的 collapse 起的作用了；
的 class：navbar navbar-dark bg-dark box-shadow，兩個(gè) 都有同一個(gè) bg-dark，那么這個(gè)其實(shí)就是用來(lái)設(shè)置背景的，因?yàn)檎归_(kāi)后，其實(shí) 拼接起來(lái)的，只是背景色剛好一樣，看不出來(lái)而已。
被 collapse 折疊起來(lái)了，此時(shí)頁(yè)面上只呈現(xiàn)第二個(gè) 內(nèi)容而已，這個(gè) 的高度等樣式由 navbar、navbar-dark、bg-dark 這些決定。
為什么會(huì)被展開(kāi)了呢？