整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
ootstrap是Twitter推出的一個(gè)開源的用于前端開發(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)目。
Bootstrap是基于HTML5和CSS3開發(fā)的，它在jQuery的基礎(chǔ)上進(jìn)行了更為個(gè)性化和人性化的完善，形成一套自己獨(dú)有的網(wǎng)站風(fēng)格，并兼容大部分jQuery插件。
Bootstrap中包含了豐富的Web組件，根據(jù)這些組件，可以快速的搭建一個(gè)漂亮、功能完備的網(wǎng)站。其中包括以下組件：下拉菜單、按鈕組、按鈕下拉菜單、導(dǎo)航、導(dǎo)航條、面包屑、分頁、排版、縮略圖、警告對話框、進(jìn)度條、媒體對象等。
Bootstrap自帶了13個(gè)jQuery插件，這些插件為Bootstrap中的組件賦予了“生命”。其中包括：模式對話框、標(biāo)簽頁、滾動(dòng)條、彈出框等。
Bootstrap Less是一個(gè) CSS 預(yù)處理器，讓 CSS 具有動(dòng)態(tài)性。另一方面，Bootstrap 是一個(gè)快速開發(fā) Web App 和站點(diǎn)的工具包。這樣，您可以在 CSS 中使用 Bootstrap 的 Less 變量、mixins（混合
）和 nesting（嵌套）。
更多內(nèi)容和資訊或者問題，更多干貨分享，盡在我的個(gè)人微信公眾號，微信名：非著名程序員，微信號：smart_android（←長按復(fù)制）。個(gè)人微信號：loonggg微博：澀郎
ootstrap是一個(gè)非常好的前端框架，在前端時(shí)間的小項(xiàng)目中需要使用Bootstrap做前端，于是就學(xué)習(xí)了一下，覺得非常好用，推薦給新手。
一. 什么是Bootstrap？
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發(fā)更加快捷。同時(shí)，Bootstrap 還是最受歡迎的 HTML、CSS 和 JS 框架，用于開發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。作為一個(gè)框架，它和jQuery EasyUI、WeUI一樣，助力于前端開發(fā)。簡而言之，使用Bootstrap讓前端開發(fā)變得簡潔高效。
注釋：
1. jQuery EasyUI：jQuery EasyUI 是一個(gè)基于 jQuery 的框架，集成了各種用戶界面插件。
2. WeUI：WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信 Web 開發(fā)量身設(shè)計(jì)，可以令用戶的使用感知更加統(tǒng)一。包含button、cell、dialog、toast、article、icon等各式元素。
二. Bootstrap入門
使用Bootstrap框架，必須具備 HTML 、 CSS 和 JavaScript 的基礎(chǔ)知識。如果沒有掌握，可以前往【菜鳥教程】學(xué)習(xí)。
2.1 環(huán)境配置
你有兩種方式可以使用Bootstrap，本地調(diào)用和網(wǎng)絡(luò)調(diào)用。
本地調(diào)用需要從網(wǎng)絡(luò)上下載[用于生產(chǎn)環(huán)境的Bootstrap]，下載地址：http://v3.bootcss.com/getting-started 。
下載完成后，解壓文件，得到如下圖所示的三個(gè)文件夾，這三個(gè)文件夾分別用于存放樣式文件、字體文件、js腳本文件。
網(wǎng)絡(luò)調(diào)用只需使用 BootCDN 提供的免費(fèi) CDN 加速服務(wù)。在你的網(wǎng)頁文件中寫入以下link即可。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可選的 Bootstrap 主題文件（一般不用引入） -->
<link rel="stylesheet" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
2.2 了解Bootstrap
2.2.1 Bootstrap是html5的文檔
Bootstrap 使用到的某些 HTML 元素和 CSS 屬性需要將頁面設(shè)置為 HTML5 文檔類型。在你項(xiàng)目中的每個(gè)頁面都要參照下面的格式進(jìn)行設(shè)置。
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
2.2.2 移動(dòng)設(shè)備優(yōu)先
Bootstrap 3是對移動(dòng)設(shè)備友好的。不是簡單的增加一些可選的針對移動(dòng)設(shè)備的樣式，而是直接融合進(jìn)了框架的內(nèi)核中。也就是說，Bootstrap 是移動(dòng)設(shè)備優(yōu)先的。針對移動(dòng)設(shè)備的樣式融合進(jìn)了框架的每個(gè)角落，而不是增加一個(gè)額外的文件。
為了確保適當(dāng)?shù)睦L制和觸屏縮放，需要在 之中添加 viewport 元數(shù)據(jù)標(biāo)簽。
<meta name="viewport" content="width=device-width, initial-scale=1">
在移動(dòng)設(shè)備瀏覽器上，通過為視口（viewport）設(shè)置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。這樣禁用縮放功能后，用戶只能滾動(dòng)屏幕，就能讓你的網(wǎng)站看上去更像原生應(yīng)用的感覺。注意，這種方式我們并不推薦所有網(wǎng)站使用，還是要看你自己的情況而定。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2.2.3 柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式、移動(dòng)設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會(huì)自動(dòng)分為最多12列。它包含了易于使用的預(yù)定義類，還有強(qiáng)大的mixin 用于生成更具語義的布局。
柵格系統(tǒng)用于通過一系列的行（row）與列（column）的組合來創(chuàng)建頁面布局，你的內(nèi)容就可以放入這些創(chuàng)建好的布局中。下面就介紹一下 Bootstrap 柵格系統(tǒng)的工作原理：
“行（row）”必須包含在 .container （固定寬度）或 .container-fluid （100%
寬度）中，以便為其賦予合適的排列（aligment）和內(nèi)補(bǔ)（padding）。
通過“行（row）”在水平方向創(chuàng)建一組“列（column）”。
你的內(nèi)容應(yīng)當(dāng)放置于“列（column）”內(nèi)，并且，只有“列（column）”可以作為行（row）”的直接子元素。
類似 .row 和 .col-xs-4 這種預(yù)定義的類，可以用來快速創(chuàng)建柵格布局。Bootstrap 源碼中定義的 mixin也可以用來創(chuàng)建語義化的布局。
通過為“列（column）”設(shè)置 padding 屬性，從而創(chuàng)建列與列之間的間隔（gutter）。通過為 .row 元素設(shè)置負(fù)值
margin 從而抵消掉為 .container 元素設(shè)置的
padding，也就間接為“行（row）”所包含的“列（column）”抵消掉了padding。
負(fù)值的 margin就是下面的示例為什么是向外突出的原因。在柵格列中的內(nèi)容排成一行。
柵格系統(tǒng)中的列是通過指定1到12的值來表示其跨越的范圍。例如，三個(gè)等寬的列可以使用三個(gè) .col-xs-4 來創(chuàng)建。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素將被作為一個(gè)整體另起一行排列。
柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何
.col-md-*柵格類適用于與屏幕寬度大于或等于分界點(diǎn)大小的設(shè)備 ， 并且針對小屏幕設(shè)備覆蓋柵格類。 因此，在元素上應(yīng)用任何
.col-lg-*不存在， 也影響大屏幕設(shè)備。
通過研究后面的實(shí)例，可以將這些原理應(yīng)用到你的代碼中。
下面這幅圖有助于理解Bootstrap的柵格系統(tǒng)。
三. 在線學(xué)習(xí)的網(wǎng)站推薦
Bootstrap V3版本官網(wǎng)：http://v3.bootcss.com
菜鳥教程Bootstrap專欄：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
騰訊課堂：http://ke.qq.com
慕課網(wǎng)：http://www.imooc.com
ootstrap這個(gè)前端工具包，可以快速開發(fā)WEB應(yīng)用程序。Bootstrap使用最新版本的瀏覽器技術(shù)，它也是HTML以及CSS的集合，可以為WEB開發(fā)貢獻(xiàn)更加時(shí)尚的網(wǎng)格系統(tǒng)、表格、表單、板式。如果身為程序員的你，到現(xiàn)在還沒有開始用Bootstrap模板，那簡直是很落伍。W3Cschool小師妹為大家收集了最值得收藏的Bootstrap資源網(wǎng)站，你千萬不要錯(cuò)過。
1.模板資源
W3Cschool小師妹為大家收集了Bootstrap模板資源，這些網(wǎng)站很漂亮，還可以下載Bootstrap模板。唯一的缺點(diǎn)，應(yīng)該就是幾乎都是英文版的，閱讀起來不太方便。但是對于程序大牛來說，英語根本不是問題。
2.工具
Bootstrap不僅僅是一個(gè)框架，它改變了整個(gè)游戲規(guī)則。Bootstrap使得更多應(yīng)用以及網(wǎng)站設(shè)計(jì)開發(fā)更賤簡便。Bootstrap工具很多，像可視化制作工具、在線設(shè)計(jì)工具等，W3Cschool小師妹為大家收集的這些站點(diǎn)，都可以下載Bootstrap工具，需要的話可以去123點(diǎn)W3Cschool點(diǎn)cn看一下。
3.站點(diǎn)/主題網(wǎng)站
Bootstrap基于jQuery框架而開發(fā)，但是和jQuery框架相比，Bootstrap更加人性化以及個(gè)性化。Bootstrap可以兼容絕大多數(shù)的jQuery插件，有自己獨(dú)特的網(wǎng)站風(fēng)格。W3Cschool小師妹為大家收集的Bootstrap站點(diǎn)或主題網(wǎng)站很多，都很實(shí)用。想要資源的話，可以自行去123點(diǎn)W3Cschool點(diǎn)cn下載。
當(dāng)前最熱門的前端框架，要屬Bootstrap。它來自于Twitter，具有簡潔、直觀、強(qiáng)悍等特點(diǎn)。Bootstrap把大量HTML框架普及成產(chǎn)品，它的功能相當(dāng)強(qiáng)大。作為程序員的你，快來收藏這些Bootstrap資源網(wǎng)站吧。
學(xué)編程技術(shù)，就到W3Cschool，如果你喜歡我們的文章，可以點(diǎn)擊右上角關(guān)注我們;如果你想看到更多IT界的資訊，可以加我們的公眾號。
公眾號：w3cschoolcn
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
