什么是 Bootstrap？

Bootstrap 是Web 應(yīng)用程序的前端框架。基于 HTML、CSS、JAVASCRIPT 。

Bootstrap由美國Twitter公司的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)的，基于HTML、CSS、JavaScript 的簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，使得 Web 開發(fā)更加快捷。

Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范，由動(dòng)態(tài)CSS語言Less寫成，一直是GitHub上的熱門開源項(xiàng)目。

Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。在現(xiàn)在的 Web 開發(fā)中，有幾個(gè)幾乎所有的 Web 項(xiàng)目中都需要的組件。

Bootstrap版本功能發(fā)展

Bootstrap 與最新版的 Google Chrome、Firefox、Internet Explorer、Opera 和 Safari 瀏覽器兼容，盡管有些瀏覽器并不是支持所有操作系統(tǒng)。

從 2.0 版本開始，Bootstrap 支持響應(yīng)式網(wǎng)頁設(shè)計(jì)(RWD)。頁面布局可以根據(jù)顯示網(wǎng)頁的設(shè)備（桌面、平板電腦、手機(jī)）來進(jìn)行動(dòng)態(tài)調(diào)整。

3.0 版本開始，Bootstrap 將移動(dòng)設(shè)備優(yōu)先作為設(shè)計(jì)方針，更加強(qiáng)調(diào)了響應(yīng)式設(shè)計(jì)。

4.0 alpha 版本添加 Sass 和 Flexbox 的支持。

Bootstrap特點(diǎn)

Bootstrap非常流行，得益于它非常實(shí)用的功能和特點(diǎn)。主要核心功能特點(diǎn)如下：

l跨設(shè)備、跨瀏覽器

可以兼容所有現(xiàn)代瀏覽器，包括比較詬病的IE7、8。當(dāng)然，本課程不再考慮IE9以下瀏覽器。

l響應(yīng)式布局

不但可以支持PC端的各種分辨率的顯示，還支持移動(dòng)端PAD、手機(jī)等屏幕的響應(yīng)式切換顯示。

l提供的全面的組件

Bootstrap提供了實(shí)用性很強(qiáng)的組件，包括：導(dǎo)航、標(biāo)簽、工具條、按鈕等一系列組件，方便開發(fā)者調(diào)用。

l內(nèi)置jQuery插件

Bootstrap提供了很多實(shí)用性的jquery插件，這些插件方便開發(fā)者實(shí)現(xiàn)Web中各種常規(guī)特效。

l支持HTML5、CSS3

HTML5語義化標(biāo)簽和CSS3屬性，都得到很好的支持。

l支持LESS動(dòng)態(tài)樣式

LESS使用變量、嵌套、操作混合編碼，編寫更快、更靈活的CSS。它和Bootstrap能很好的配合開發(fā)。

Bootstrap基本內(nèi)容與組件

Bootstrap 包括 HTML、CSS 及 JavaScript 的框架，提供字體排印、窗體、按鈕、導(dǎo)航及其他各種組件及 Javascript 擴(kuò)展。主要包含內(nèi)容有：

l基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)、鏈接樣式、背景的基本結(jié)構(gòu)。

l全局CSS樣式：Bootstrap 自帶以下特性：全局的 CSS設(shè)置、定義基本的 HTML 元素樣式、可擴(kuò)展的 class，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。

l組件：Bootstrap 包含了十幾個(gè)可重用的組件，用于創(chuàng)建圖像、下拉菜單、導(dǎo)航、警告框、彈出框等等。

lJavaScript 插件：Bootstrap包含了十幾個(gè)自定義的jQuery 插件。您可以直接包含所有的插件，也可以逐個(gè)包含這些插件。

l定制：您可以定制Bootstrap的組件、LESS 變量和jQuery 插件來得到您自己的版本。

lBootstrap全局Css樣式包括

Grid

Typography

Tables

Forms

Buttons

Responsiveness。

l還有大量其他有用的前端組件，比如：

Dropdowns

Navigation

Modals

Typehead

Pagination

Carousal

Breadcrumb

Tab

Thumbnails

Headers

Bootstrap資源

l參考資料

Bootstrap官網(wǎng)?

http://getbootstrap.com

Bootstrap中文網(wǎng)?

http://www.bootcss.com

網(wǎng)站使用案例?

http://expo.bootcss.com/

Github?

https://github.com/twbs/bootstrap

l教程

Bootstrap菜鳥教程?

http://www.runoob.com/bootstrap/bootstrap-tutorial.html

Bootstrap on W3Schools? ?

http://www.w3schools.com/bootstrap

慕課網(wǎng)視頻教程?

http://www.imooc.com/course/list?c=bootstrap

l模版

Bootstrap免費(fèi)模版

http://startbootstrap.com

模糊效果后臺(tái)模版?

http://akveo.github.io/blur-admin/

后臺(tái)模版?

https://colorlib.com/polygon/gentelella/index.html

儀表盤?

http://keen.github.io/dashboards/

l主題

Flat－ui?

http://designmodo.com/flat-free/

各種配色主題?

https://bootswatch.com/

基于bootstrap的主題框架?

http://bootflat.github.io

l實(shí)用工具

實(shí)用代碼片段?

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