很久沒(méi)有寫(xiě)過(guò)博客了，但是最近這段時(shí)間都沒(méi)有閑著，接觸了很多方面。比如一些前端框架和組件、還有移動(dòng)開(kāi)發(fā)React-Native、以及對(duì).NET框架設(shè)計(jì)的一些重新認(rèn)識(shí)。這些內(nèi)容在接下來(lái)的時(shí)間都會(huì)一一和大家分享的。我為什么放置了這么久又重新寫(xiě)博客呢？因?yàn)樵谶@段時(shí)間里面，我雖然接觸了這么多東西，自己也沒(méi)有停下來(lái)學(xué)習(xí)，但是沒(méi)有寫(xiě)博文總結(jié)的話(huà)，總感覺(jué)這些東西還不是我的。心里總感覺(jué)空蕩蕩的。今天先介紹了一個(gè)前端“樣式”框架——Bootstrap。
為什么在引言我稱(chēng)為Bootstrap為一個(gè)前端樣式框架呢？可能這樣的稱(chēng)謂并不是很準(zhǔn)確，但是我覺(jué)得這樣的稱(chēng)呼可以讓一些初學(xué)者可以更快明白和明白Bootstrap到底是一個(gè)什么東西。我總結(jié)東西不喜歡用一些高大上的詞語(yǔ)來(lái)加深某個(gè)知識(shí)的理解，反而更喜歡用一些大家通俗易懂的詞語(yǔ)來(lái)描述知識(shí)點(diǎn)。雖然這樣的描述方式可能會(huì)有點(diǎn)不準(zhǔn)確，但是我覺(jué)得則沒(méi)什么大不了的，因?yàn)檫@樣的描述確實(shí)可以讓初學(xué)者更快理解這個(gè)知識(shí)。因?yàn)槲以趯W(xué)習(xí)知識(shí)點(diǎn)的時(shí)候就有這樣的困惑，有些知識(shí)官方文檔都說(shuō)的高大上，其實(shí)說(shuō)白了也就是以前的一些東西，然后進(jìn)行封裝使得開(kāi)發(fā)更加簡(jiǎn)單和快速罷了。所以這里我分享Bootstrap框架也是這樣的。并且內(nèi)容組織方面也是為了讓初學(xué)者更好地掌握。因?yàn)槲覄傞_(kāi)始接觸的時(shí)候也是一個(gè)初學(xué)者。我自認(rèn)為這樣的組織方式可以更快更好地理解知識(shí)。
對(duì)于Bootstrap，首先要介紹而是它的整體架構(gòu)——它到底由什么組成的。相信大家看下面一張圖就可以很快明白Bootstrap中具體由哪些東西組成的。
從上面的圖，可以清楚看到，Bootstrap主要有下面幾部分組成：
12柵格系統(tǒng)——就是將屏幕平分12份（列）。使用行(row)來(lái)組織元素（每一行都包括12個(gè)列），然后將內(nèi)容放在列內(nèi)。通過(guò)col-md-offset-*來(lái)控制列偏移。
基礎(chǔ)布局組件——Bootstrap提供了多種基礎(chǔ)布局組件。如排版、代碼、表格、按鈕、表單等。
Jquery——Bootstrap所有的JavaScript插件都依賴(lài)于Jquery的。如果要使用這些JS插件，就必須引用Jquery庫(kù)。這也是為什么我們?cè)诔艘肂ootstrap的JS文件和CSS文件外，還需要引用Jquery庫(kù)的原因，兩者是依賴(lài)關(guān)系。
CSS組件——Bootstrap為我們預(yù)實(shí)現(xiàn)了很多CSS組件。如下拉框、按鈕組、導(dǎo)航等。也就是說(shuō)Bootstrap內(nèi)容幫我們定義好了很多CSS樣式，你可以將這些樣式直接應(yīng)用到之前的下拉框等元素里。
JavaScript插件——Bootstrap也為我們實(shí)現(xiàn)了一些JS插件，我們可以用其提供的插件要完成一些常用功能，而不需要我們?cè)僦匦聦?xiě)JS代碼來(lái)實(shí)現(xiàn)像提示框，模態(tài)窗口這樣的效果了。
響應(yīng)式設(shè)計(jì)——這就是一個(gè)設(shè)計(jì)理念。響應(yīng)式的意思就是它會(huì)根據(jù)屏幕尺寸來(lái)自動(dòng)調(diào)整頁(yè)面，使得前端頁(yè)面在不同尺寸的屏幕上都可以表現(xiàn)很好。
Bootstrap就是由上面幾部分組成的。上面已經(jīng)都每個(gè)組成部分做了一個(gè)簡(jiǎn)單的介紹，接下來(lái)的內(nèi)容無(wú)非是通過(guò)一些實(shí)例來(lái)對(duì)每個(gè)組成部分進(jìn)行一個(gè)詳細(xì)的介紹罷了。
Bootstrap定義12柵格系統(tǒng)，就是為了更好的布局。每個(gè)前端框架都首先要定義好的就是布局系統(tǒng)。在Bootstrap里面，就是利用行和列來(lái)創(chuàng)建頁(yè)面布局的。其布局有幾個(gè)原則：
行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中
每行都包含12列
將內(nèi)容放置在每列中
在bootstrap的柵格系統(tǒng)中，根據(jù)寬度將瀏覽器分為4種。其值分別是：自動(dòng)（100%）、750px、970px、 1170px。
對(duì)應(yīng)的樣式為超?。▁s）、小型（sm）、中型屏幕 （md）、大型 （lg）
其本就是通過(guò)媒體查詢(xún)定義最小寬度實(shí)現(xiàn)。所以，Bootstrap做出來(lái)的網(wǎng)頁(yè)向大兼容，向小不兼容！
在Bootstrap框架內(nèi)，已預(yù)先定義好了屏幕大小的分界值，其分界值得定義就是通過(guò)媒體查詢(xún)來(lái)定義的。其定義方式如下：
/* 超小屏幕（手機(jī)，小于 768px） *//* 沒(méi)有任何媒體查詢(xún)相關(guān)的代碼，因?yàn)檫@在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動(dòng)設(shè)備優(yōu)先的嗎？） *//* 小屏幕（平板，大于等于 768px） */@media (min-width: @screen-sm-min) { ... }/* 中等屏幕（桌面顯示器，大于等于 992px） */@media (min-width: @screen-md-min) { ... }/* 大屏幕（大桌面顯示器，大于等于 1200px） */@media (min-width: @screen-lg-min) { ... }
其實(shí)Win8應(yīng)用開(kāi)發(fā)中也應(yīng)用了媒體查詢(xún)來(lái)實(shí)現(xiàn)可響應(yīng)式的應(yīng)用。所以大家以后如果聽(tīng)到了可響應(yīng)系統(tǒng)不要覺(jué)得很高深哦，其實(shí)就是框架為我們定義了媒體查詢(xún)，如果超過(guò)了媒體查詢(xún)中定義的最小寬度對(duì)應(yīng)某個(gè)類(lèi)型屏幕，通過(guò)這樣的方式，就可以在不同屏幕之間收縮元素大小來(lái)適應(yīng)屏幕。然而B(niǎo)ootstrap提出的概念是移動(dòng)設(shè)備優(yōu)先的，所以Bootstrap設(shè)計(jì)出來(lái)的頁(yè)面只能向大兼容，向小不兼容。
基礎(chǔ)布局組件就是Bootstrap框架內(nèi)為一些基礎(chǔ)布局的標(biāo)簽定義了一些統(tǒng)一的樣式。如Table、按鈕、表單等。下面讓我們看一個(gè)Table的例子：
<!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'> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!--因?yàn)檫@里沒(méi)有使用到Bootstrap的JS插件，所以就沒(méi)有引用Jquery組件--> <!-- Bootstrap --> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css'> </head> <body> <h3>默認(rèn)樣式的Table</h3> <table class='table'> <caption>表標(biāo)題.</caption> <!-- 表頭，組合為t head, t代表table的意思--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <th scope='row'>1</th> <td>Tommy</td> <td>Li</td> </tr> <tr> <th scope='row'>2</th> <td>Bob</td> <td>san</td> </tr> <tr> <th scope='row'>3</th> <td>Sam</td> <td>wang</td> </tr> </tbody> </table> <h3>帶邊框的表格</h3> <table class='table-bordered'> <caption>表標(biāo)題.</caption> <!-- 表頭，組合為t head, t代表table的意思--> <thead> <tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> </tr> </thead> <tbody> <tr> <th scope='row'>1</th> <td>Tommy</td> <td>Li</td> </tr> <tr> <th scope='row'>2</th> <td>Bob</td> <td>san</td> </tr> <tr> <th scope='row'>3</th> <td>Sam</td> <td>wang</td> </tr> </tbody> </table> <!-- 更多表格樣式參考： http://v3.bootcss.com/css/#tables--> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src='http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js'></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src='http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> </body></html>
具體的運(yùn)行效果：在此運(yùn)行。
對(duì)于Button和表單的例子代碼這里就不貼了，大家可以通過(guò)下面的鏈接查看運(yùn)行效果和查看源碼。也可以通過(guò)最后的下載文件來(lái)下載本專(zhuān)題的所有源碼。
Button例子的運(yùn)行效果：在此運(yùn)行
表單例子的運(yùn)行效果：在此運(yùn)行
CSS組件和基礎(chǔ)布局組件差不多，也就是Bootstrap為一些標(biāo)簽定義了一些已有的樣式，這些樣式運(yùn)行的效果都非常美觀，這樣每個(gè)公司或開(kāi)發(fā)人員都不需要再去寫(xiě)一篇樣式，從而加快開(kāi)發(fā)效率。這里直接看一個(gè)導(dǎo)航的例子吧。說(shuō)白這個(gè)東西，你用多了自然就熟了。
<!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'> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css'> </head> <body> <h3>導(dǎo)航條</h3> <nav class='navbar navbar-default navbar-inverse'> <div class='container-fluid'> <!-- Brand and toggle get grouped for better mobile display --> <div class='navbar-header'> <button type='button' class='navbar-toggle collapsed' data-toggle='collapse' data-target='#bs-example-navbar-collapse-1' aria-expanded='false'> <span class='sr-only'>Toggle navigation</span> <span class='icon-bar'></span> <span class='icon-bar'></span> <span class='icon-bar'></span> </button> <a class='navbar-brand' href='#'>Home</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'> <ul class='nav navbar-nav'> <li class='active'><a href='#'>Home <span class='sr-only'>(current)</span></a></li> <li><a href='#'>About</a></li> </ul> <ul class='nav navbar-nav navbar-right'> <li><a href='#'>Link</a></li> <li class='dropdown'> <a href='#' class='dropdown-toggle' data-toggle='dropdown' role='button' aria-haspopup='true' aria-expanded='false'>Dropdown <span class='caret'></span></a> <ul class='dropdown-menu'> <li><a href='#'>Action 1</a></li> <li><a href='#'>Action 2</a></li> <li><a href='#'>Action 3</a></li> <li role='separator' class='divider'></li> <li><a href='#'>Separated Action</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --></nav> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src='http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js'></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src='http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> </body></html>
其運(yùn)行效果：在此運(yùn)行
其他組件的運(yùn)行效果如下:
分頁(yè)例子的運(yùn)行效果：在此運(yùn)行
下拉菜單的運(yùn)行效果：在此運(yùn)行
面板的運(yùn)行效果：在此運(yùn)行
默認(rèn)情況下，所有的JS插件都可以通過(guò)設(shè)置特定的HTML代碼和相應(yīng)的屬性來(lái)實(shí)現(xiàn)，而無(wú)需寫(xiě)一行JavaScript代碼。其實(shí)現(xiàn)本質(zhì)就是Bootstrap為這些屬性實(shí)現(xiàn)了對(duì)應(yīng)的JavaScript代碼。
下面就直接看一個(gè)模態(tài)窗口的例子：
<!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'> <!-- 上述3個(gè)meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel='stylesheet' href='http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css'> </head> <body> <h3>模態(tài)窗口</h3> <!-- Button trigger modal --> <button type='button' class='btn btn-primary btn-lg' data-toggle='modal' data-target='#myModal'> Click me </button> <div class='modal fade' id='myModal'> <div class='modal-dialog'> <div class='modal-content'> <div class='modal-header'> <button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> <h4 class='modal-title'>Modal title</h4> </div> <div class='modal-body'> <p>Test body…</p> </div> <div class='modal-footer'> <button type='button' class='btn btn-default' data-dismiss='modal'>Close</button> <button type='button' class='btn btn-primary'>Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --></div><!-- /.modal --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src='http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js'></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src='http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js'></script> </body></html>
其運(yùn)行效果：在此運(yùn)行。
看完前面的所有內(nèi)容之后，是不是瞬間覺(jué)得Bootstrap其實(shí)只不過(guò)是一個(gè)樣式框架罷了。利用它我們可以快速方便地構(gòu)建Web頁(yè)面。另外看完前面的內(nèi)容，你也就不會(huì)困惑為什么Bootstrap官方文檔為什么是下面這樣的吧：
Bootstrap官方文檔的導(dǎo)航條中的條目不就是我們上面的介紹的幾大組成部分嘛。
到此，本文的所有內(nèi)容就分享結(jié)束了，希望通過(guò)本文可以讓初學(xué)者快速理解和掌握Bootstrap。另外本文相當(dāng)于是Bootstrap要領(lǐng)吧，關(guān)于更詳細(xì)的內(nèi)容大家可以自行參考Bootstrap中文官網(wǎng)。不過(guò)我覺(jué)得沒(méi)不要了，有那樣的時(shí)間還不如就直接實(shí)踐起來(lái)呢。VS2013的Web應(yīng)用程序就已經(jīng)默認(rèn)支持Bootstrap框架，大家可以看完之前就可以馬上通過(guò)VS2013來(lái)創(chuàng)建一個(gè)Web應(yīng)用程序來(lái)體驗(yàn)下Bootstrap在Asp.net MVC 下的應(yīng)用吧。
