1、什麼是Bootrap
2、爲什麼要學習Bootstrap
3、哪些項目在使用Bootstrap
4、安裝和使用
5、簡單閱讀Bootstrap源碼
6、Bootstrap全局CSS樣式
7、Bootstrap組件
8、Bootstrap插件（瞭解）
9、Bootstrap定製
10、Bootstrap學習意義總結
1、什麼是Bootstrap
Bootstrap來自 Twitter，是目前很受歡迎的前端框架。Bootstrap 是基於 HTML、CSS、JavaScript 的，它簡潔靈活，使得 Web 開發更加快捷。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規範，它即是由動態CSS語言Less寫成。Bootstrap一經推出後頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發者較爲熟悉的框架，如WeX5前端開源框架等，也是基於Bootstrap源碼進行性能優化而來。
它的中文官方網站是：
http://www.bootcss.com/
Bootstrap是基於HTML5和CSS3開發的，它在jQuery的基礎上進行了更爲個性化的完善，形成一套自己獨有的網站風格，併兼容大部分jQuery插件。它目前的最新大版本號是3（截止本課件完成日期2017年9月25日的最新版本是3.3.7），而最新的版本第4版（開始採用SASS進行編寫）已經推出預覽版。但現有的項目和新啓動的項目仍然選用的第3版，這是因爲第3版已經比較成熟，已知的bug也基本被修復完成，通用性更好。
2、爲什麼要學習Bootstrap
由於Bootstrap的普及率非常之高，至少在CSS UI庫這個領域的地位是至今沒有任何UI庫可以撼動的。而且它本身就是基於CSS編寫的，對於一個Web前端開發工程師來說Bootstrap是我們必須要學習瞭解的一個UI庫。
現在市面上的UI庫層出不窮，雖然很多UI庫都已經上升到了框架級別（當然Bootstrap也被稱作是“CSS框架”，但對於“框架”這個稱呼業界一直存在爭議），但是其CSS部分的設計的靈感基本都是來源於Bootstrap，如：ionic、mui、amazeUI、elementUI、sui、jQuery UI、bootmetro、flatUI等等，還遠遠不止這些，可謂是層出不窮，稍微知名的公司都希望自己開發出自己的各種框架，例如ElementUI就是“餓了麼”旗下針對Vue進行二次封裝開發的UI庫和JS組件，網易也有自己的CSS框架NEC。
這麼多CSS UI庫或框架，你任意選出幾款都會發現帶着Bootstrap的影子，甚至還有一個叫“jQuery UI Bootstrap”的，則直接結合了jQuery UI和Bootstrap新層的一個UI庫，在GitHub上也有5K星的人氣。但這也只是一個縮影，可以說Bootstrap在UI庫這類技術上有着重要的里程碑的作用。
就算是世界上精力最旺盛的人，也沒有辦法在“有生之年”去學習完這麼多的UI庫、JS框架和其它相關的各類技術，所以我們的學習應該是有重點的，並且學會去舉一反三。對於Boostrap這樣的UI庫肯定是我們不應該錯過的東西，也是我們去了解UI庫這類技術的入門最佳選擇。
3、哪些項目在使用Bootstrap
Bootstrap的運用不可謂不多，世界上很多知名的互聯網企業以及非互聯網企業都對這個庫有着涉足，我們可以通過她的官網和它的案例精選裏都可以看到使用Bootstrap的這些項目。
<官網首頁部分截圖>
4、安裝和使用
Bootstrap的安裝和使用和jQuery差不多，可以進入官網下載頁裏去查看幾種下載方式，爲了方便起見，我們只推薦使用cdn和npm（或bower）兩種方式，但是考慮到網絡狀況和對源碼的閱讀檢查，先使用npm下載到本地，然後再去找到需要引用的文件是我們首推的方式。
再Win+R鍵後輸入“cmd”或者“powershell”後進入到命令行模式，輸入以下命令安裝Bootstrap的第3版。
npm install -g bootstrap@3
或使用淘寶鏡像安裝：
cnpm install -g bootstrap@3
使用npm下載完成之後的Bootstrap的目錄大致如下：
而我們需要的是dist這個目錄裏面的東西
不過一般情況下我們都不太會去使用它的js文件，而只會使用它css相關的東西，我們來看看css和fonts裏相關的東西。
<css目錄內容>
<fonts目錄內容>
對於css目錄來講，我們只需要boostrap.css這個文件。而boostrap.min.css是上線選擇的版本，由於我們可能會涉及到後期定製，這兩個版本可能都不是我們的最終上線版本。帶.map的叫做“資源映射”文件，而其它帶有theme字樣的是主題文件，這些我們都不需要。
fonts目錄裏面這些文件都是“字體圖標”文件，雖然文件比較多，但對同一個瀏覽器來講只會去使用其中的一個文件，不同的瀏覽器支持的格式會有所差別，在這裏我們就不用去深究了。
爲了讓項目最小化，並且要讓項目的文件目錄競購更加容易管理，一般我們只需要單獨將boostrap.css這個文件和整個fonts目錄都放在我們項目中存放“第三方”文件的文件夾裏（個人習慣將該文件夾命名爲“plugin”），並且替換一下boostrap.css裏的“…/fonts/”爲“./fonts/”即可（替換後前面會少一個點“.”表示相對目錄爲當前目錄）
現在我們需要通過資源管理器或者任意的代碼編輯器新建一個基本的項目結構：
在代碼編輯器內展開的基本文件結構如圖：
然後在我們的index.html文件中引用相關資源：
接下來我們只要打開Boostrap第三版的文檔，點擊導航“全局CSS樣式”（可點擊跳轉），然後點擊右側導航中的“按鈕”→“預定義樣式”，然後點擊代碼右上角的“copy”按鈕，回到編輯器標籤內粘貼剛纔複製的代碼，然後運行該頁面即可看到代碼效果。
<最終效果>
如果在瀏覽器內看到這些按鈕的樣式生效了，那恭喜你，你對Bootstrap的引用已經成功了。
5、簡單閱讀Bootstrap源碼
通過對boostrap.css源碼簡單的閱讀，瞭解Boostrap的核心設計理念。
爲了增強瀏覽的兼容性，Boostrap內整合了Normalize.css（鏈接）這個文件的重要內容，從該版本boostrap.css的第6行一直到262行都主要是Normalize.css的內容，這在boostrap.css文件的第6行的代碼註釋上有明確標明。
從代碼263到1067行都是Boostrap對“Glyphicon Halflings”這個字體圖標的使用，這個一個收費的字體圖標，在Boostrap的官網上的“組件”導航內第一節“Glyphicons 字體圖標”有描述。若你不喜歡這個字體圖標，想使用其它字體圖標（如：Font Awesome、Iconfont、Iconmoon、Ionicons等），可以將這部分的代碼刪除掉，或者是在以後對Boostrap足夠熟悉之後去進行Boostrap的自定義構建，使boostrap.css文件最小化。
從1068行開始到1614是Bootstrap的一些自己的樣式初始化以及一些自定義的Class樣式類進行設置（包含了部分樣式的響應式設置）的部分。
從1615行一直到2250行爲止都是Boostrap被很多人“誤會”爲核心功能的“柵格化佈局”部分。不過對於單純對行佈局的CSS代碼來講，600多行的代碼也算是比較重視了。
而後續的代碼都是對錶格、表單、按鈕、圖片，以及自己的一些組件如下拉菜單、按鈕組、輸入框組、導航等樣式類的設置了，另外還包含對這些樣式類的響應式設計。
需要注意的是，對於Boostrap的組件部分來講，很多樣式類都是用了Glyphicons字體圖標，若沒有引用字體圖標，某些組件的樣式可能無法正常顯示。
作者：青葉三點水一木化爲風
來源：CSDN
原文：https://blog.csdn.net/qq_25502269/article/details/79347809
版權聲明：本文爲博主原創文章，轉載請附上博文鏈接！