Bootstrap基礎

時間 2019-11-17

原文原文鏈接

一、什麼是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也基本被修復完成，通用性更好。

二、爲何要學習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庫這類技術的入門最佳選擇。

三、哪些項目在使用Bootstrap
Bootstrap的運用不可謂很少，世界上不少知名的互聯網企業以及非互聯網企業都對這個庫有着涉足，咱們能夠經過她的官網和它的案例精選裏均可以看到使用Bootstrap的這些項目。

<官網首頁部分截圖>

四、安裝和使用
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」按鈕，回到編輯器<body>標籤內粘貼剛纔複製的代碼，而後運行該頁面便可看到代碼效果。

<最終效果>
若是在瀏覽器內看到這些按鈕的樣式生效了，那恭喜你，你對Bootstrap的引用已經成功了。

五、簡單閱讀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字體圖標，若沒有引用字體圖標，某些組件的樣式可能沒法正常顯示。

六、Bootstrap全局CSS樣式
地址：http://v3.bootcss.com/components/

七、Bootstrap組件
地址：http://v3.bootcss.com/components/

八、Bootstrap插件（瞭解）
地址：http://v3.bootcss.com/javascript/

九、Bootstrap定製
地址：http://v3.bootcss.com/customize/

javascript

1. Bootstrap 基礎
2. Bootstrap基礎
3. Bootstrap基礎教程：tutorialspoint-bootstrap
4. Bootstrap基礎入門
5. bootstrap-基礎表單
6. Bootstrap基礎知識
7. bootstrap基礎佈局
8. 【Flask】bootstrap table基礎
9. bootstrap基礎知識
10. BootStrap基礎入門
更多相關文章...
• Kotlin 基礎語法 - Kotlin 教程
• Scala 基礎語法 - Scala教程
• Kotlin學習（二）基本類型
• ☆基於Java Instrument的Agent實現

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。