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