有關Bootstrap你想要知道的都在這裡

01-25

簡介

Bootstrap是Twitter推出的一個用於前端開發的開源工具包。它由Twitter的設計師Mark Otto和Jacob Thornton合作開發，是一個CSS/HTML框架。閱讀更多有關bootstrap

前端框架這個名詞並不能直觀地描述bootstrap的具體內容，它其實就是包含扁平化設計ui+響應式柵格系統+css樣式+基本html組件+js組件+其他實用工具在內的一個前端工具集合。

使用入門

想要學會使用boostrap第一步當然是閱讀它的文檔，文檔分為四個主要部分：

起步

這裡介紹了如何在你的網頁中引入並開始使用bootstrap，安裝bootstrap有很多種方法，初學者只需要記住下面這種最基本的方式就好，如果你聯網很方便，可以直接使用CDN鏈接，如果需要離線使用，也可以下載bootstrap到本地並把地址替換成你的本地路徑啦。

<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

起步里還提供了一個很有用的基本模版：

<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width_=device-width, initial-scale=1">  <title>Bootstrap 101 Template</title>  <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">    </head> <body> <h1>你好，世界！</h1>  <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>  <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body></html>

如果我們想要以最快的速度開始使用，直接複製這一段代碼就可以開始啦。在頁面的頂部引入css底部引入js是編寫html的基本常識，這樣可以保證頁面最自然地載入。

同樣它還很貼心地提供了一些例如帶導航欄的頁面、著陸頁、控制台、登錄頁等最常用的頁面模版，這些代碼你也可以直接複製使用襖。

全局css樣式

這個部分的內容介紹了bootstrap的柵格系統，bootstrap就是靠這一套系統實現響應式的。響應式可以理解為同一個頁面可以依據設備屏幕或瀏覽器窗口的大小自行適應布局。如果你想要一個直觀的體會，可以試著打開使用bootstrap的網頁並拖動你瀏覽器窗口的大小，觀察頁面會如何變化。

除此之外這裡還介紹了bootstrap文本、按鈕、表單、表格等基本html元素的樣式。使用Bootstrap編寫網頁，就好像P圖擁有了美圖秀秀一樣，你不再需要仔細鑽研色相包和對比度，只需要給照片挑選一個濾鏡就可以了，在Bootstrap中創建一個按鈕，不需要你考慮背景色邊框形狀字體大小，只需要給<button>標籤加一個class="btn btn-default"的屬性就大功告成啦。

基本組件

這裡的內容包括bootstrap提供的圖標、導航欄、菜單等等構成頁面的基本組件。很多的代碼示例都可以直接複製來使用。

js組件

這部分是一些帶動畫效果的頁面組件，例如模態框、下拉菜單、彈出框、輪播圖等。

參考資料

Bootstrap官網 http://getbootstrap.com
Bootstrap中文網 http://www.bootcss.com
網站使用案例 http://expo.bootcss.com/
Github https://github.com/twbs/bootstrap

教程

Bootstrap菜鳥教程 http://www.runoob.com/bootstrap/bootstrap-tutorial.html
Bootstrap on W3Schools http://www.w3schools.com/bootstrap
慕課網視頻教程 http://www.imooc.com/course/list?c=bootstrap

模版

Bootstrap免費模版 http://startbootstrap.com
模糊效果後台模版 http://akveo.github.io/blur-admin/
後台模版 https://colorlib.com/polygon/gentelella/index.html
儀錶盤 http://keen.github.io/dashboards/

主題

Flat－ui http://designmodo.com/flat-free/
各種配色主題 https://bootswatch.com/
基於bootstrap的主題框架 http://bootflat.github.io

實用工具

實用代碼片段 http://bootsnipp.com/ 提供一些有用的在線工具和代碼片段