【開發新手福利】—Bootstrap運用終極指南

時間 2019-11-06

原文原文鏈接

如下內容由摹客團隊翻譯整理，僅供學習交流，摹客iDoc是支持智能標註和切圖的產品協做設計神器。html

Bootstrap是一個功能強大的、以移動端爲優先的響應式前端框架，它是用CSS、HTML和JavaScript構建的。與從零開始編程，甚至許多其餘框架相比，Bootstrap都有許多優點。前端

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它最初是由Twitter的設計師Mark Otto和Jacob Thornton合做開發的，如今已經成爲世界上最流行的前端框架之一。在成爲開源軟件以前，它被稱爲Twitter Blueprint，並在公開發布以前的一年多時間裏擔任Twitter內部風格指南。html5

若是你還不熟悉Bootstrap，本文提供的信息和資源將幫助你快速入門。node

爲何推薦使用Bootstrap開始編程呢?

使用Boostrap比在Web項目上從零開發更有優點。其中最大的一個優點是：與許多其餘框架和模板相比，Bootstrap有大量現有資源可用。（後文會爲你們提供這些資源）react

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

1.使用方便: 使用Bootstrap開發很是快速和簡單，而且也很靈活。你能夠在Bootstrap中使用Less，CSS，甚至是Sass（前提是你下載了Saas版的Bootstrap）。git

2. 響應式柵格: Bootstrap使用12列響應柵格，它支持嵌套和偏移元素。柵格能夠保持響應性，也能夠輕鬆地更改成固定佈局。github

3. 開發更快: Bootstrap有大量現成的組件和資源可用，它能夠大大提升開發速度。web

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

5. 預樣式組件: Bootstrap程序還提供用於下拉菜單、導航條、彈窗和許多其它功能的預樣式組件。

6. 綁定JavaScript的組件: Bootstrap附帶了一組JavaScript組件來添加功能。開發人員操做模態窗口、工具提示、彈窗警告等變得更加容易，甚至能夠徹底跳過編寫腳本。

7. 文檔支持: Bootstrap提供了出色的文檔教程，這對初學者和資深用戶都很是有用。

8. 易於集成: Bootstrap能夠與各類框架和平臺集成，包括在新站點和現有站點上。你能夠將特定的bootstrap元素和已有的CSS代碼一塊兒使用。

如何選擇和安裝Boostrap？

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

編譯版本能夠在任何項目中直接使用，裏面包含已編譯的CSS和JavaScript，以及各自的編譯和壓縮版本。它還包含了數百個Glyphicon字體圖標，以及Boostrap主題可供你自由選擇。

源碼版本包括預編譯的CSS和JavaScript，以及字體資源；它還包括Less、JavaScript和說明文檔。它基本上能夠被視爲一個更完整的版本，儘管學習曲線會比編譯版本高一些。

還有一個Saas版本，它是Bootstrap從Less移植到Sass的源碼移植項目。若是你想快速地在Rails、Compass或僅支持Sass的項目中使用Bootstrap，那麼這個版本是不二之選。

一旦決定好要安裝哪一個版本，就須要安裝Grunt，它是構建Bootstrap項目使用的。你須要先下載並安裝node.js，而後是Grunt。Grunt擁有大量的插件，幾乎任何你想要的命令均可以用 Grunt 實現。

而後，你能夠從簡單的Bootstrap HTML模板開始，或者從官網提供的實例模板開始。（使用實例時建議按照本身的需求進行修改，而不是簡單的複製、粘貼。）實例模板包括網格佈局、基於jumbotron的佈局、各類導航條和其它定製組件（例如博客頁面、封面圖、登陸頁等）。

若是我想要開發非響應式站點怎麼辦?

雖然Bootstrap是響應式、移動端優先的前端框架，但若是你想開發一個非響應式的站點，能夠選擇禁用響應式佈局。只須要在CSS中省略viewport元標記，覆蓋每一個網格層容器的寬度，刪除導航欄上全部摺疊和展開行爲，並在使用網格佈局時對它們進行一些調整就能夠了。關於操做詳情，你能夠閱讀入門文檔中的說明。

Bootstrap插件和組件資源

Bootstrap自帶了不少出色的功能，也提供了不少插件和組件幫助擴展功能來知足開發需求。

1.Fuel UX 是一組用於web應用程序的附加JavaScript控件。它提供了超過12個jQuery控件供部署使用，如數據中繼器、樹、導航欄等。

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

3. Bootstrap-Modal 插件能夠將可堆疊的、響應性強的AJAX模態彈窗添加到你的Bootstrap站點。它支持全寬調制解調器和長調制解調器以及其它格式。

4. Bootbox.js是小型的JavaScript庫，它能夠幫助你輕鬆地建立對話框。

5. Bootstrap Image Gallery是blueimp Gallery的插件。blueimp Gallery是一個使用Bootstrap模態彈窗，支持觸摸、響應的圖片庫。

6.Bootstrap Lightbox是一個基於Bootstrap的大圖預覽插件。它包含了背景選項，關閉lightbox等功能。

7. Bootstrap Form Helpers 是一組jQuery插件，用於更好地構建表單。你能夠從中選擇單個表單進行使用，也能夠根據須要選擇多個一塊兒使用。

8. Notifications 是一個Bootstrap插件，支持開發人員輕鬆地將自定義通知添加到本身的網站或應用程序。它包含了位置、類型、轉換等選項。

9. Bootstrap-growl 是一個jQuery插件，它將常規的Bootstrap彈窗轉換爲相似於Growl的通知。這個插件提供信息、錯誤和成功樣式的彈窗，而且支持多個彈窗連續通知。

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

11. Boostrap Maxlength插件能夠在文本輸入達到最大長度時，提供一個可視的反饋。

12. Boostrap Markdown 能夠輕鬆地爲表單添加Markdown支持，並將它們無縫轉換爲Markdown編輯器。

13. Bootstrap Switch 3 能夠幫助你輕鬆地將複選框和單選按鈕轉換爲切換開關。

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

15. jQBootstrapValidation 是一個用於Bootstrap表單的jQuery驗證插件，它易於使用，而且當驗證發生錯誤時，能夠提供清晰的錯誤說明。

16. Bootstrap-wysihtml5 是一個簡單而漂亮的HTML5 WYSIWYG編輯器，它是一個JavaScript插件。

17. Summernote 是一個簡單靈活的WYSIWYG編輯器，適用於Bootstrap。

18. BIC Calendar 是一個用於標記事件的jQuery簡單日曆組件。

19. bootstrap-datetimepicker 是一個用於Bootstrap的簡單的日期和時間選擇器組件。

20. Clockface 是一個用於Bootstrap的時間選擇器，支持格式和觸發器等選項。

21. Bootstrap Timepicker 這個時間控件，經過鼠標或者方向鍵就能夠輕鬆選擇一個時間的文本輸入。

22. Color Palette for Bootstrap 是一個簡單的顏色選擇器，提供基本的、gmail風格的和自定義的調色板。

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

24. Bootstro.js 插件能夠幫助你輕鬆地爲本身的網站添加一個導航。

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

26. Flippant.js 是一個迷你的JavaScript和CSS類庫，用於翻轉頁面元素，與其餘類庫沒有依賴關係，便於自定義使用。

27. Tab drop for Bootstrap 插件，當Tab不能徹底適應分配的空間時，它能夠將這些Tab從新排列到下拉選項中。

28. Tocify 是一個jQuery目錄插件，能夠用Bootstrap進行主題化。

29. Bootpag 是一個用於動態分頁的jQuery插件，可使用Bootstrap或本身實現。

30. Typeahead.js 是一個來自Twitter的JavaScript庫，用於構建typeaheads。

31. X-editable 插件支持在Bootstrap中的頁面上建立可編輯元素。

32. Bootstrap Tree View 插件能夠爲顯示分層樹結構提供簡單解決方案。

33. Tokenfield for Bootstrap 是一個高級的tokenizing插件，專一於鍵盤和複製粘貼支持。

34. Bootstrap Star Rating 是一個jQuery Star Rating插件，它支持分數填充和RTL輸入等特性。

35. Yamm Megamenu 是另外一個使用標準導航條標記和流式網格系統進行引導的Megamenu。

36. Bootstrap Multiselect是一個用於UI的jQuery插件，它使用具備多個屬性的選擇輸入，並使其以帶複選框的下拉框形式出現。

37. Knockout-Bootstrap 是一組用於訪問Bootstrap JavaScript小部件的清除綁定處理程序。

38. Gridmanager.js 支持在Bootstrap之類的框架中建立和編輯網格佈局。

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

40. WATable 是一個jQuery插件，它支持開發人員快速、輕鬆地對數據進行過濾、格式化、分頁和排序。

41. Bootstrap Datagrid 是一個簡單強大的jQuery插件，能夠徹底定製。

42. PNotify 是一個用於Bootstrap的JavaScript通知插件。

43. Bootstrap Tour 是一個簡單的插件，用於建立帶有(或者沒有)Bootstrap的站點瀏覽。

44.來自PayPal的 Bootstrap Accessibility插件能夠幫助用戶訪問許多Bootstrap組件。

45.Bootstrap Video Player 是一個可定製的HTML5視頻播放器jQuery插件。

Bootstrap主題、模板和UI工具包

若是願意的話，你也能夠本身構建Bootstrap主題和模板。爲提升開發效率，如下這些免費的高級資源也能夠直接下載使用。其中部分資源須要安裝原版使用，而大部分則支持定製設計。

1.Creative Market網站有超過300個高級Bootstrap主題可用。

2.BootstrapMade是一個提供了多種風格主題的免費網站。

3.BootstrapBay是一個提供高級主題和模板的市場，你能夠在這裏買賣Bootstrap模板和主題。

4.GridGum是一個高級Bootstrap主題市場，提供了幾十個不一樣主題供下載。

5.ThemeForest 網站有數百個Bootstrap主題出售，起價僅4美圓。

6.WrapBootstrap是一個提供高級Bootstrap模板和主題的市場，提供了從電子商務網站到登錄頁面的全部主題和模板。

7.Cardeostrap是一個用於Bootstrap的大型UI工具包，內容分爲CSS、組件和JavaScript三個版塊。

8.Flatstrap是一個免費和開源的Bootstrap主題框架，這些框架都去掉了沒必要要的虛飾，簡單實用。

9.Bootmetro 是一個基於TwitterBootstrap的web框架，具備Windows 8的外觀和感受。

10.Fbootstrapp是一個建立Facebookiframe應用程序的工具包。

11.Bootplus 是一個谷歌風格的前端框架，它時髦而直觀。

12.Get Template 是HTML5和CSS3模板的一個集合，具備多種風格。

13.BootstrapTaste 是一組免費和高級的Bootstrap主題。

14. Bootstrap Zero 自稱是Bootstrap最大的免費開源模板集合。

15. BlackTie 是一個基於各類Bootstrap版本的免費和高級主題集合。它們包括從儀表板主題到新聞聚合器，再到組合主題的全部內容。

16. Startup Framework 是來自DesignModo的一個界面簡單但功能強大的Bootstrap框架。

17. Bootswatch 是一個免費、易於安裝、模塊化的Bootstrap主題集合。

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

19. Joostrap 是用Bootstrap構建的Joomla模板的集合。

20. Theme Armada是一組手工製做的響應主題，由Bootstrap構建，起價僅8美圓。

21. PrepBootstrap是一個免費主題、模板和小部件的資源供應網站，從管理界面到聯繫人表單，無所不包。

22. RandThemes 是一組高級的Bootstrap主題，它包含了前端和後端設計。

23. Roots 是一個創建在Bootstrap上的WordPress主題框架。

24. UI Bootstrap 是一組用AngularJS編寫的Bootstrap組件。

25. The Bootstrap 是一個簡潔的、偏現代風格的WordPress Bootstrap主題。

26. BootstrapWP 是一個基於Bootstrap的自定義WordPress主題開發的基礎程序。

27. StrapPress 是一個WordPress主題，它以移動爲優先，響應性強，包含了大量的Bootstrap元素。

28. Shoestrap 是一個基於Bootstrap的高級WordPress主題。

29. Expose Framework是一個基礎主題，它提供了流暢的佈局、HTML5和CSS3以及響應菜單。

結論

Bootstrap只是使用HTML、CSS和JavaScript構建響應性強、以移動爲優先的網站框架之一。若是你仍不肯定使用什麼框架進行開發，不妨花點時間研究一下與其它框架相比Bootstrap能夠作什麼 (或者說你以爲用它作什麼比較順手)，而後選擇最適合項目需求的框架。千萬不要懼怕切換不一樣框架，合適的框架對項目開發有很大幫助 !

原文做者: CAMERON CHAPMAN

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

學習工具，但不受限於某種工具。摹客iDoc，高效協做，從產品到開發，只要一個文檔，讓你的團隊高效協做！