Bootstrap是一個(gè)功能強(qiáng)大的、以移動(dòng)端為優(yōu)先的響應(yīng)式前端框架，它是用CSS、HTML和JavaScript構(gòu)建的。與從零開(kāi)始編程，甚至許多其他框架相比，Bootstrap都有許多優(yōu)勢(shì)。

Bootstrap是Twitter推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。它最初是由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開(kāi)發(fā)的，現(xiàn)在已經(jīng)成為世界上最流行的前端框架之一。在成為開(kāi)源軟件之前，它被稱為T(mén)witter Blueprint，并在公開(kāi)發(fā)布之前的一年多時(shí)間里擔(dān)任Twitter內(nèi)部風(fēng)格指南。

如果你還不熟悉Bootstrap，本文提供的信息和資源將幫助你快速入門(mén)。

為什么推薦使用Bootstrap開(kāi)始編程呢?

使用Boostrap比在Web項(xiàng)目上從零開(kāi)發(fā)更有優(yōu)勢(shì)。其中最大的一個(gè)優(yōu)勢(shì)是：與許多其他框架和模板相比，Bootstrap有大量現(xiàn)有資源可用。（后文會(huì)為大家提供這些資源）

除了大量可引用的資源之外，以下也是Bootstrap值得被選擇的理由:

1.使用方便: 使用Bootstrap開(kāi)發(fā)非常快速和簡(jiǎn)單，并且也很靈活。你可以在Bootstrap中使用Less，CSS，甚至是Sass（前提是你下載了Saas版的Bootstrap）。

2. 響應(yīng)式柵格: Bootstrap使用12列響應(yīng)柵格，它支持嵌套和偏移元素。柵格可以保持響應(yīng)性，也可以輕松地更改為固定布局。

3. 開(kāi)發(fā)更快: Bootstrap有大量現(xiàn)成的組件和資源可用，它可以大大提高開(kāi)發(fā)速度。

4. 基本樣式: Bootstrap附帶了大量HTML元素的基本樣式，它包括排版、表單、圖像等樣式。

5. 預(yù)樣式組件: Bootstrap程序還提供用于下拉菜單、導(dǎo)航條、彈窗和許多其它功能的預(yù)樣式組件。

6. 綁定JavaScript的組件: Bootstrap附帶了一組JavaScript組件來(lái)添加功能。開(kāi)發(fā)人員操作模態(tài)窗口、工具提示、彈窗警告等變得更加容易，甚至可以完全跳過(guò)編寫(xiě)腳本。

7. 文檔支持: Bootstrap提供了出色的文檔教程，這對(duì)初學(xué)者和資深用戶都非常有用。

8. 易于集成: Bootstrap可以與各種框架和平臺(tái)集成，包括在新站點(diǎn)和現(xiàn)有站點(diǎn)上。你可以將特定的bootstrap元素和已有的CSS代碼一起使用。

如何選擇和安裝Boostrap？

下載Boostrap主要有兩種版本: 編譯版本或源碼版本。

編譯版本可以在任何項(xiàng)目中直接使用，里面包含已編譯的CSS和JavaScript，以及各自的編譯和壓縮版本。它還包含了數(shù)百個(gè)Glyphicon字體圖標(biāo)，以及Boostrap主題可供你自由選擇。

源碼版本包括預(yù)編譯的CSS和JavaScript，以及字體資源；它還包括Less、JavaScript和說(shuō)明文檔。它基本上可以被視為一個(gè)更完整的版本，盡管學(xué)習(xí)曲線會(huì)比編譯版本高一些。

還有一個(gè)Saas版本，它是Bootstrap從Less移植到Sass的源碼移植項(xiàng)目。如果你想快速地在Rails、Compass或僅支持Sass的項(xiàng)目中使用Bootstrap，那么這個(gè)版本是不二之選。

一旦決定好要安裝哪個(gè)版本，就需要安裝Grunt，它是構(gòu)建Bootstrap項(xiàng)目使用的。你需要先下載并安裝node.js，然后是Grunt。Grunt擁有大量的插件，幾乎任何你想要的命令都可以用 Grunt 實(shí)現(xiàn)。

然后，你可以從簡(jiǎn)單的Bootstrap HTML模板開(kāi)始，或者從官網(wǎng)提供的實(shí)例模板開(kāi)始。（使用實(shí)例時(shí)建議按照自己的需求進(jìn)行修改，而不是簡(jiǎn)單的復(fù)制、粘貼。）實(shí)例模板包括網(wǎng)格布局、基于jumbotron的布局、各種導(dǎo)航條和其它定制組件（例如博客頁(yè)面、封面圖、登錄頁(yè)等）。

更多Boostrap模板：

干貨集錦——20個(gè)最佳Bootstrap著陸頁(yè)模板，快速網(wǎng)頁(yè)設(shè)計(jì)不是事兒

2018年最好用的20個(gè)Bootstrap網(wǎng)站模板

如果我想要開(kāi)發(fā)非響應(yīng)式站點(diǎn)怎么辦?

雖然Bootstrap是響應(yīng)式、移動(dòng)端優(yōu)先的前端框架，但如果你想開(kāi)發(fā)一個(gè)非響應(yīng)式的站點(diǎn)，可以選擇禁用響應(yīng)式布局。只需要在CSS中省略viewport元標(biāo)記，覆蓋每個(gè)網(wǎng)格層容器的寬度，刪除導(dǎo)航欄上所有折疊和展開(kāi)行為，并在使用網(wǎng)格布局時(shí)對(duì)它們進(jìn)行一些調(diào)整就可以了。關(guān)于操作詳情，你可以閱讀入門(mén)文檔中的說(shuō)明。

Bootstrap插件和組件資源

Bootstrap自帶了很多出色的功能，也提供了很多插件和組件幫助擴(kuò)展功能來(lái)滿足開(kāi)發(fā)需求。

1.Fuel UX 是一組用于web應(yīng)用程序的附加JavaScript控件。它提供了超過(guò)12個(gè)jQuery控件供部署使用，如數(shù)據(jù)中繼器、樹(shù)、導(dǎo)航欄等。

2. Jasny Bootstrap是一套包含垂直導(dǎo)航組件和彈窗組件的Bootstrap插件。

3. Bootstrap-Modal 插件可以將可堆疊的、響應(yīng)性強(qiáng)的AJAX模態(tài)彈窗添加到你的Bootstrap站點(diǎn)。它支持全寬調(diào)制解調(diào)器和長(zhǎng)調(diào)制解調(diào)器以及其它格式。

4. Bootbox.js是小型的JavaScript庫(kù)，它可以幫助你輕松地創(chuàng)建對(duì)話框。

5. Bootstrap Image Gallery是blueimp Gallery的插件。blueimp Gallery是一個(gè)使用Bootstrap模態(tài)彈窗，支持觸摸、響應(yīng)的圖片庫(kù)。

6.Bootstrap Lightbox是一個(gè)基于Bootstrap的大圖預(yù)覽插件。它包含了背景選項(xiàng)，關(guān)閉lightbox等功能。

7. Bootstrap Form Helpers 是一組jQuery插件，用于更好地構(gòu)建表單。你可以從中選擇單個(gè)表單進(jìn)行使用，也可以根據(jù)需要選擇多個(gè)一起使用。

8. Notifications 是一個(gè)Bootstrap插件，支持開(kāi)發(fā)人員輕松地將自定義通知添加到自己的網(wǎng)站或應(yīng)用程序。它包含了位置、類型、轉(zhuǎn)換等選項(xiàng)。

9. Bootstrap-growl 是一個(gè)jQuery插件，它將常規(guī)的Bootstrap彈窗轉(zhuǎn)換為類似于Growl的通知。這個(gè)插件提供信息、錯(cuò)誤和成功樣式的彈窗，并且支持多個(gè)彈窗連續(xù)通知。

10. Bootstrap-select 插件為Bootstrap添加自定義選擇提供按鈕下拉菜單。

11. Boostrap Maxlength插件可以在文本輸入達(dá)到最大長(zhǎng)度時(shí)，提供一個(gè)可視的反饋。

12. Boostrap Markdown 可以輕松地為表單添加Markdown支持，并將它們無(wú)縫轉(zhuǎn)換為Markdown編輯器。

13. Bootstrap Switch 3 可以幫助你輕松地將復(fù)選框和單選按鈕轉(zhuǎn)換為切換開(kāi)關(guān)。

14. jQuery File Upload 添加了一個(gè)jQuery File Upload小部件，支持拖放、多個(gè)文件選擇等等。

15. jQBootstrapValidation 是一個(gè)用于Bootstrap表單的jQuery驗(yàn)證插件，它易于使用，并且當(dāng)驗(yàn)證發(fā)生錯(cuò)誤時(shí)，可以提供清晰的錯(cuò)誤說(shuō)明。

16. Bootstrap-wysihtml5 是一個(gè)簡(jiǎn)單而漂亮的HTML5 WYSIWYG編輯器，它是一個(gè)JavaScript插件。

17. Summernote 是一個(gè)簡(jiǎn)單靈活的WYSIWYG編輯器，適用于Bootstrap。

18. BIC Calendar 是一個(gè)用于標(biāo)記事件的jQuery簡(jiǎn)單日歷組件。

19. bootstrap-datetimepicker 是一個(gè)用于Bootstrap的簡(jiǎn)單的日期和時(shí)間選擇器組件。

20. Clockface 是一個(gè)用于Bootstrap的時(shí)間選擇器，支持格式和觸發(fā)器等選項(xiàng)。

21. Bootstrap Timepicker 這個(gè)時(shí)間控件，通過(guò)鼠標(biāo)或者方向鍵就可以輕松選擇一個(gè)時(shí)間的文本輸入。

22. Color Palette for Bootstrap 是一個(gè)簡(jiǎn)單的顏色選擇器，提供基本的、gmail風(fēng)格的和自定義的調(diào)色板。

23. Pick-a-Color 是一個(gè)用于Bootstrap的jQuery顏色選擇器，它支持靈活的文本輸入、保存顏色等等。

24. Bootstro.js 插件可以幫助你輕松地為自己的網(wǎng)站添加一個(gè)導(dǎo)航。

25. Social Buttons for Twitter Bootstrap 2 插件提供了矢量、可縮放、支持視屏和可定制的社交按鈕。

26. Flippant.js 是一個(gè)迷你的JavaScript和CSS類庫(kù)，用于翻轉(zhuǎn)頁(yè)面元素，與其他類庫(kù)沒(méi)有依賴關(guān)系，便于自定義使用。

27. Tab drop for Bootstrap 插件，當(dāng)Tab不能完全適應(yīng)分配的空間時(shí)，它可以將這些Tab重新排列到下拉選項(xiàng)中。

28. Tocify 是一個(gè)jQuery目錄插件，可以用Bootstrap進(jìn)行主題化。

29. Bootpag 是一個(gè)用于動(dòng)態(tài)分頁(yè)的jQuery插件，可以使用Bootstrap或自己實(shí)現(xiàn)。

30. Typeahead.js 是一個(gè)來(lái)自Twitter的JavaScript庫(kù)，用于構(gòu)建typeaheads。

31. X-editable 插件支持在Bootstrap中的頁(yè)面上創(chuàng)建可編輯元素。

32. Bootstrap Tree View 插件可以為顯示分層樹(shù)結(jié)構(gòu)提供簡(jiǎn)單解決方案。

33. Tokenfield for Bootstrap 是一個(gè)高級(jí)的tokenizing插件，專注于鍵盤(pán)和復(fù)制粘貼支持。

34. Bootstrap Star Rating 是一個(gè)jQuery Star Rating插件，它支持分?jǐn)?shù)填充和RTL輸入等特性。

35. Yamm Megamenu 是另一個(gè)使用標(biāo)準(zhǔn)導(dǎo)航條標(biāo)記和流式網(wǎng)格系統(tǒng)進(jìn)行引導(dǎo)的Megamenu。

36. Bootstrap Multiselect是一個(gè)用于UI的jQuery插件，它使用具有多個(gè)屬性的選擇輸入，并使其以帶復(fù)選框的下拉框形式出現(xiàn)。

37. Knockout-Bootstrap 是一組用于訪問(wèn)Bootstrap JavaScript小部件的清除綁定處理程序。

38. Gridmanager.js 支持在Bootstrap之類的框架中創(chuàng)建和編輯網(wǎng)格布局。

39. Slider for Bootstrap 是Bootstrap的滑塊控件。

40. WATable 是一個(gè)jQuery插件，它支持開(kāi)發(fā)人員快速、輕松地對(duì)數(shù)據(jù)進(jìn)行過(guò)濾、格式化、分頁(yè)和排序。

41. Bootstrap Datagrid 是一個(gè)簡(jiǎn)單強(qiáng)大的jQuery插件，可以完全定制。

42. PNotify 是一個(gè)用于Bootstrap的JavaScript通知插件。

43. Bootstrap Tour 是一個(gè)簡(jiǎn)單的插件，用于創(chuàng)建帶有(或者沒(méi)有)Bootstrap的站點(diǎn)瀏覽。

44.來(lái)自PayPal的 Bootstrap Accessibility插件可以幫助用戶訪問(wèn)許多Bootstrap組件。

45.Bootstrap Video Player 是一個(gè)可定制的HTML5視頻播放器jQuery插件。

Bootstrap主題、模板和UI工具包

如果愿意的話，你也可以自己構(gòu)建Bootstrap主題和模板。為提高開(kāi)發(fā)效率，以下這些免費(fèi)的高級(jí)資源也可以直接下載使用。其中部分資源需要安裝原版使用，而大部分則支持定制設(shè)計(jì)。

1.Creative Market網(wǎng)站有超過(guò)300個(gè)高級(jí)Bootstrap主題可用。

2.BootstrapMade是一個(gè)提供了多種風(fēng)格主題的免費(fèi)網(wǎng)站。

3.BootstrapBay是一個(gè)提供高級(jí)主題和模板的市場(chǎng)，你可以在這里買賣Bootstrap模板和主題。

4.GridGum是一個(gè)高級(jí)Bootstrap主題市場(chǎng)，提供了幾十個(gè)不同主題供下載。

5.ThemeForest 網(wǎng)站有數(shù)百個(gè)Bootstrap主題出售，起價(jià)僅4美元。

6.WrapBootstrap是一個(gè)提供高級(jí)Bootstrap模板和主題的市場(chǎng)，提供了從電子商務(wù)網(wǎng)站到登陸頁(yè)面的所有主題和模板。

7.Cardeostrap是一個(gè)用于Bootstrap的大型UI工具包，內(nèi)容分為CSS、組件和JavaScript三個(gè)版塊。

8.Flatstrap是一個(gè)免費(fèi)和開(kāi)源的Bootstrap主題框架，這些框架都去掉了不必要的虛飾，簡(jiǎn)單實(shí)用。

9.Bootmetro 是一個(gè)基于TwitterBootstrap的web框架，具有Windows 8的外觀和感覺(jué)。

10.Fbootstrapp是一個(gè)創(chuàng)建Facebookiframe應(yīng)用程序的工具包。

11.Bootplus 是一個(gè)谷歌風(fēng)格的前端框架，它時(shí)髦而直觀。

12.Get Template 是HTML5和CSS3模板的一個(gè)集合，具有多種風(fēng)格。

13.BootstrapTaste 是一組免費(fèi)和高級(jí)的Bootstrap主題。

14. Bootstrap Zero 自稱是Bootstrap最大的免費(fèi)開(kāi)源模板集合。

15. BlackTie 是一個(gè)基于各種Bootstrap版本的免費(fèi)和高級(jí)主題集合。它們包括從儀表板主題到新聞聚合器，再到組合主題的所有內(nèi)容。

16. Startup Framework 是來(lái)自DesignModo的一個(gè)界面簡(jiǎn)單但功能強(qiáng)大的Bootstrap框架。

17. Bootswatch 是一個(gè)免費(fèi)、易于安裝、模塊化的Bootstrap主題集合。

18. Start Bootstrap 是一組Bootstrap主題的免費(fèi)模板，包括博客主題、投資組合主題等等。

19. Joostrap 是用Bootstrap構(gòu)建的Joomla模板的集合。

20. Theme Armada是一組手工制作的響應(yīng)主題，由Bootstrap構(gòu)建，起價(jià)僅8美元。

21. PrepBootstrap是一個(gè)免費(fèi)主題、模板和小部件的資源供應(yīng)網(wǎng)站，從管理界面到聯(lián)系人表單，無(wú)所不包。

22. RandThemes 是一組高級(jí)的Bootstrap主題，它包含了前端和后端設(shè)計(jì)。

23. Roots 是一個(gè)建立在Bootstrap上的WordPress主題框架。

24. UI Bootstrap 是一組用AngularJS編寫(xiě)的Bootstrap組件。

25. The Bootstrap 是一個(gè)簡(jiǎn)潔的、偏現(xiàn)代風(fēng)格的WordPress Bootstrap主題。

26. BootstrapWP 是一個(gè)基于Bootstrap的自定義WordPress主題開(kāi)發(fā)的基礎(chǔ)程序。

27. StrapPress 是一個(gè)WordPress主題，它以移動(dòng)為優(yōu)先，響應(yīng)性強(qiáng)，包含了大量的Bootstrap元素。

28. Shoestrap 是一個(gè)基于Bootstrap的高級(jí)WordPress主題。

29. Expose Framework是一個(gè)基礎(chǔ)主題，它提供了流暢的布局、HTML5和CSS3以及響應(yīng)菜單。

結(jié)論

Bootstrap只是使用HTML、CSS和JavaScript構(gòu)建響應(yīng)性強(qiáng)、以移動(dòng)為優(yōu)先的網(wǎng)站框架之一。如果你仍不確定使用什么框架進(jìn)行開(kāi)發(fā)，不妨花點(diǎn)時(shí)間研究一下與其它框架相比Bootstrap可以做什么 (或者說(shuō)你覺(jué)得用它做什么比較順手)，然后選擇最適合項(xiàng)目需求的框架。千萬(wàn)不要害怕切換不同框架，合適的框架對(duì)項(xiàng)目開(kāi)發(fā)有很大幫助 !

原文作者: CAMERON CHAPMAN

原文地址：https://www.webdesignerdepot.com/2014/10/the-ultimate-guide-to-bootstrap/