文章導(dǎo)讀：
隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁面特效和用戶體驗(yàn)硕并。作為開發(fā)者霎褐，我們需要了解一些寶貴的CSS? UI開源框架資源观蓄，它們可以幫助我們更快更好地實(shí)現(xiàn)一些現(xiàn)代化的界面，包括一些移動(dòng)設(shè)備的網(wǎng)頁界面風(fēng)格設(shè)計(jì)祠墅。
接下來就是要詳解Bootstrap框架：首先侮穿，我們要知道為什么使用框架的原理。CSS框架是一系列CSS文件的集合體毁嗦，包含了基本的元素重置亲茅，頁面排版，網(wǎng)絡(luò)布局狗准，表單樣式克锣，通用規(guī)則等代碼塊。使用CSS框架腔长，可以簡化工作袭祟，提高工作效率。
形態(tài)：
目前使用較廣的是版本2和3捞附，其中2的最新版本的是2.3.2巾乳，3的最新版本是3.3.7。
在2017年8月下旬鸟召，Bootstrap四周歲之際胆绊，Bootstrap團(tuán)隊(duì)發(fā)布了Bootstrap 4 alpha版，4的最主要變化包括以下方面：
從 Less 遷移到 Sass
改進(jìn)網(wǎng)格系統(tǒng)
缺省彈性框支持
Dropped wells, thumbnails, and panels for cards
合并所有 HTML resets 到一個(gè)新的模塊中：Reboot
全新自定義選項(xiàng)
不再支持 IE8
重寫所有的 JavaScript 插件
改進(jìn)工具提示和 popovers 的自動(dòng)定位
改進(jìn)文檔
其他大量改進(jìn)
1欧募、什么是bootstrap辑舷？------->>前端最流行的UI庫
Bootstrap，來自Twitter槽片，是目前很受歡迎的前端框架何缓。Bootstrap 是基于 HTML、CSS还栓、JavaScript 的碌廓，它簡潔靈活，使得 Web 開發(fā)更加快捷剩盒。它由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)谷婆，是一個(gè)CSS/HTML框架。Bootstrap提供了優(yōu)雅的HTML和CSS規(guī)范辽聊，它即是由動(dòng)態(tài)CSS語言Less寫成纪挎。Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目跟匆，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目异袄。國內(nèi)一些移動(dòng)開發(fā)者較為熟悉的框架，如WeX5前端開源框架等玛臂，也是基于Bootstrap源碼進(jìn)行性能優(yōu)化而來烤蜕。
2封孙、我們?yōu)槭裁匆褂肂ootstrap框架，而不使用其他CSS框架讽营？
移動(dòng)設(shè)備優(yōu)先：自 Bootstrap 3 起虎忌，框架包含了貫穿于整個(gè)庫的移動(dòng)設(shè)備優(yōu)先的樣式。
瀏覽器支持：? ? 所有的主流瀏覽器都支持 Bootstrap橱鹏。
容易上手：??????? 只要您具備 HTML 和 CSS 的基礎(chǔ)知識膜蠢，您就可以開始學(xué)習(xí) Bootstrap。
響應(yīng)式設(shè)計(jì)：???? Bootstrap 的響應(yīng)式 CSS 能夠自適應(yīng)于臺式機(jī)莉兰、平板電腦和手機(jī)挑围。
它為開發(fā)人員創(chuàng)建接口提供了一個(gè)簡潔統(tǒng)一的解決方案。
它包含了功能強(qiáng)大的內(nèi)置組件贮勃，易于定制贪惹。
它還提供了基于 Web 的定制。
它是開源的寂嘉。
3奏瞬、Bootstrap包的內(nèi)容
3.1、基本結(jié)構(gòu)：Bootstrap 提供了一個(gè)帶有網(wǎng)格系統(tǒng)泉孩、鏈接樣式硼端、背景的基本結(jié)構(gòu)。
-------------->>>Bootstrap 基本結(jié)構(gòu)部分詳細(xì)講解寓搬。
3.2珍昨、CSS：Bootstrap 自帶以下特性：全局的 CSS 設(shè)置、定義基本的 HTML 元素樣式句喷、可擴(kuò)展的 class镣典，以及一個(gè)先進(jìn)的網(wǎng)格系統(tǒng)。
-------------->>>這將在Bootstrap CSS部分詳細(xì)講解唾琼。
3.3兄春、組件：Bootstrap 包含了十幾個(gè)可重用的組件，用于下拉菜單锡溯、按鈕組赶舆、按鈕下拉菜單、導(dǎo)航祭饭、導(dǎo)航條芜茵、路徑導(dǎo)航、分頁倡蝙、排版九串、縮略圖、警告對話框悠咱、進(jìn)度條蒸辆、媒體對象等征炼。根據(jù)這些組件析既，可以快速的搭建一個(gè)漂亮躬贡、功能完備的網(wǎng)站。
-------------->>>這將在布局組件部分詳細(xì)講解眼坏。
3.4拂玻、JavaScript 插件：Bootstrap 包含了十幾個(gè)自定義的 jQuery 插件。您可以直接包含所有的插件宰译，也可以逐個(gè)包含這些插件檐蚜。
-------------->>>這將在Bootstrap 插件部分詳細(xì)講解。
3.5沿侈、定制：您可以定制 Bootstrap 的組件闯第、LESS 變量和 jQuery 插件來得到您自己的版本。
4缀拭、我們看下使用Bootstrap的利弊：
優(yōu)點(diǎn)：
以前手寫的一些框架東西咳短，都寫入一個(gè)方法里面，直接引用（因?yàn)樵陂_發(fā)中蛛淋，經(jīng)常會遇到這樣的情況咙好，比如一個(gè)輪播特效我們要寫四遍，每個(gè)人樣式不一樣）
a) 提高開發(fā)效率褐荷。
b) 規(guī)范名稱定義勾效，便于維護(hù)。
c) 規(guī)范項(xiàng)目開發(fā)流程
d)css代碼更清晰叛甫、簡單层宫。html代碼更合理。
e) 大規(guī)模項(xiàng)目中可以減少用戶下載
?缺點(diǎn)：
a) 學(xué)習(xí)成本提高其监。你需要了解整個(gè)框架萌腿，需要閱讀框架的文檔。
b)css框架對于一個(gè)小項(xiàng)目等頁面來說很臃腫棠赛∠妫框架中可能有大部分你用不到的代碼。
c)可能會無法幫助你的技術(shù)提高睛约。太依賴框架鼎俘，以至于很難排除bug。包括框架中本身就帶的bug辩涝。
d) 選擇自己需要的框架與開發(fā)框架都很痛苦贸伐。寫到后面發(fā)現(xiàn)越來越不靈活，越來越臃腫怔揩。
舉個(gè)簡單的例子：（走一下基本流程）
1捉邢、在js創(chuàng)建兩個(gè)文件夾脯丝，app代表自己寫的樣式，lib代表引入的樣式
關(guān)于引用：
---------------->>>在后面的學(xué)習(xí)中伏伐，先引用jQuery,再引用bootstrap宠进，不然出錯(cuò)
ps：下面的例子很明顯實(shí)在官網(wǎng)下載的樣式，我們引入過來藐翎，這時(shí)候你在寫link的時(shí)候材蹬，就會有提示
ps：我想告訴大家的是當(dāng)我們引入bootscript的時(shí)候，我們在布局頁面的時(shí)候吝镣，像一些框架的div命名方面堤器，已經(jīng)寫好了，不信的話我們在后面接著測試
2末贾、利用內(nèi)置的div標(biāo)簽闸溃，看一看簡單的效果怎么樣
在網(wǎng)頁上可以看見，這有個(gè)特點(diǎn)拱撵，page-header是居中的辉川，不管怎么縮小，都保持頁面的居中效果
實(shí)際上裕膀，是標(biāo)簽container的問題员串，它默認(rèn)的是布滿全屏的80%
3、換個(gè)標(biāo)簽看一看效果怎么樣
布滿全屏標(biāo)簽：container-fluid
ps：fluid? 不固定的
注意的是昼扛，我們是可以通過cdn進(jìn)行在線訪問的寸齐，效果是一樣的。在此不再進(jìn)行測試抄谐，效果是一摸一樣
