30分鐘快速掌握Bootstrap框架

更新時間：2016年05月24日 09:58:59 投稿：mrr

Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。接下來通過本文給大家介紹如何快速掌握Bootstrap，感興趣的朋友一起學(xué)習(xí)吧

什么是 Bootstrap？

Bootstrap 是一個用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。

歷史

Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發(fā)的。Bootstrap 是 2011 年八月在 GitHub 上發(fā)布的開源產(chǎn)品。

最近空余時間比較多，今天先給大家介紹一個前端“樣式”框架——Bootstrap。

一、Bootstrap 整體架構(gòu)

為什么在引言我稱為Bootstrap為一個前端樣式框架呢？可能這樣的稱謂并不是很準(zhǔn)確，但是我覺得這樣的稱呼可以讓一些初學(xué)者可以更快明白和明白Bootstrap到底是一個什么東西。我總結(jié)東西不喜歡用一些高大上的詞語來加深某個知識的理解，反而更喜歡用一些大家通俗易懂的詞語來描述知識點。雖然這樣的描述方式可能會有點不準(zhǔn)確，但是我覺得則沒什么大不了的，因為這樣的描述確實可以讓初學(xué)者更快理解這個知識。因為我在學(xué)習(xí)知識點的時候就有這樣的困惑，有些知識官方文檔都說的高大上，其實說白了也就是以前的一些東西，然后進(jìn)行封裝使得開發(fā)更加簡單和快速罷了。所以這里我分享Bootstrap框架也是這樣的。并且內(nèi)容組織方面也是為了讓初學(xué)者更好地掌握。因為我剛開始接觸的時候也是一個初學(xué)者。我自認(rèn)為這樣的組織方式可以更快更好地理解知識。

對于Bootstrap，首先要介紹而是它的整體架構(gòu)——它到底由什么組成的。相信大家看下面一張圖就可以很快明白Bootstrap中具體由哪些東西組成的。

從上面的圖，可以清楚看到，Bootstrap主要有下面幾部分組成：

12柵格系統(tǒng)——就是將屏幕平分12份（列）。

使用行(row)來組織元素（每一行都包括12個列），然后將內(nèi)容放在列內(nèi)。

通過col-md-offset-*來控制列偏移。

基礎(chǔ)布局組件——Bootstrap提供了多種基礎(chǔ)布局組件。如排版、代碼、表格、按鈕、表單等。

Jquery——Bootstrap所有的JavaScript插件都依賴于Jquery的。如果要使用這些JS插件，就必須引用Jquery庫。這也是為什么我們在除了要引用Bootstrap的JS文件和CSS文件外，還需要引用Jquery庫的原因，兩者是依賴關(guān)系。

CSS組件——Bootstrap為我們預(yù)實現(xiàn)了很多CSS組件。如下拉框、按鈕組、導(dǎo)航等。也就是說Bootstrap內(nèi)容幫我們定義好了很多CSS樣式，你可以將這些樣式直接應(yīng)用到之前的下拉框等元素里。

JavaScript插件——Bootstrap也為我們實現(xiàn)了一些JS插件，我們可以用其提供的插件要完成一些常用功能，而不需要我們再重新寫JS代碼來實現(xiàn)像提示框，模態(tài)窗口這樣的效果了。

響應(yīng)式設(shè)計——這就是一個設(shè)計理念。響應(yīng)式的意思就是它會根據(jù)屏幕尺寸來自動調(diào)整頁面，使得前端頁面在不同尺寸的屏幕上都可以表現(xiàn)很好。

Bootstrap就是由上面幾部分組成的。上面已經(jīng)都每個組成部分做了一個簡單的介紹，接下來的內(nèi)容無非是通過一些實例來對每個組成部分進(jìn)行一個詳細(xì)的介紹罷了。

二、12柵格系統(tǒng)

Bootstrap定義12柵格系統(tǒng)，就是為了更好的布局。每個前端框架都首先要定義好的就是布局系統(tǒng)。在Bootstrap里面，就是利用行和列來創(chuàng)建頁面布局的。其布局有幾個原則：

行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中

每行都包含12列

將內(nèi)容放置在每列中　

在bootstrap的柵格系統(tǒng)中，根據(jù)寬度將瀏覽器分為4種。其值分別是：自動（100%）、750px、970px、 1170px。

對應(yīng)的樣式為超?。▁s）、小型（sm）、中型屏幕（md）、大型（lg）

其本就是通過媒體查詢定義最小寬度實現(xiàn)。所以，Bootstrap做出來的網(wǎng)頁向大兼容，向小不兼容！

在Bootstrap框架內(nèi)，已預(yù)先定義好了屏幕大小的分界值，其分界值得定義就是通過媒體查詢來定義的。其定義方式如下：

/* 超小屏幕（手機，小于 768px） */
/* 沒有任何媒體查詢相關(guān)的代碼，因為這在 Bootstrap 中是默認(rèn)的（還記得 Bootstrap 是移動設(shè)備優(yōu)先的嗎？） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

其實Win8應(yīng)用開發(fā)中也應(yīng)用了媒體查詢來實現(xiàn)可響應(yīng)式的應(yīng)用。所以大家以后如果聽到了可響應(yīng)系統(tǒng)不要覺得很高深哦，其實就是框架為我們定義了媒體查詢，如果超過了媒體查詢中定義的最小寬度對應(yīng)某個類型屏幕，通過這樣的方式，就可以在不同屏幕之間收縮元素大小來適應(yīng)屏幕。然而Bootstrap提出的概念是移動設(shè)備優(yōu)先的，所以Bootstrap設(shè)計出來的頁面只能向大兼容，向小不兼容。

三、基礎(chǔ)布局組件

基礎(chǔ)布局組件就是Bootstrap框架內(nèi)為一些基礎(chǔ)布局的標(biāo)簽定義了一些統(tǒng)一的樣式。如Table、按鈕、表單等。下面讓我們看一個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個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!--因為這里沒有使用到Bootstrap的JS插件，所以就沒有引用Jquery組件-->
<!-- Bootstrap -->
<link rel="stylesheet" >
</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>

對于Button和表單的例子代碼這里就不貼了，大家可以通過下面的鏈接查看運行效果和查看源碼。也可以通過最后的下載文件來下載本專題的所有源碼。

四、CSS組件

CSS組件和基礎(chǔ)布局組件差不多，也就是Bootstrap為一些標(biāo)簽定義了一些已有的樣式，這些樣式運行的效果都非常美觀，這樣每個公司或開發(fā)人員都不需要再去寫一篇樣式，從而加快開發(fā)效率。這里直接看一個導(dǎo)航的例子吧。說白這個東西，你用多了自然就熟了。

<!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個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" >
</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>

其他組件的運行效果如下:

五、JavaScript插件

默認(rèn)情況下，所有的JS插件都可以通過設(shè)置特定的HTML代碼和相應(yīng)的屬性來實現(xiàn)，而無需寫一行JavaScript代碼。其實現(xiàn)本質(zhì)就是Bootstrap為這些屬性實現(xiàn)了對應(yīng)的JavaScript代碼。

下面就直接看一個模態(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個meta標(biāo)簽*必須*放在最前面，任何其他內(nèi)容都*必須*跟隨其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" >
</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">&times;</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Test body&hellip;</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>

看完前面的所有內(nèi)容之后，是不是瞬間覺得Bootstrap其實只不過是一個樣式框架罷了。利用它我們可以快速方便地構(gòu)建Web頁面。另外看完前面的內(nèi)容，你也就不會困惑為什么Bootstrap官方文檔為什么是下面這樣的吧：

Bootstrap官方文檔的導(dǎo)航條中的條目不就是我們上面的介紹的幾大組成部分嘛。

六、總結(jié)

到此，本文的所有內(nèi)容就分享結(jié)束了，希望通過本文可以讓初學(xué)者快速理解和掌握Bootstrap。另外本文相當(dāng)于是Bootstrap要領(lǐng)吧，關(guān)于更詳細(xì)的內(nèi)容大家可以自行參考Bootstrap中文官網(wǎng)。不過我覺得沒不要了，有那樣的時間還不如就直接實踐起來呢。VS2013的Web應(yīng)用程序就已經(jīng)默認(rèn)支持Bootstrap框架，大家可以看完之前就可以馬上通過VS2013來創(chuàng)建一個Web應(yīng)用程序來體驗下Bootstrap在Asp.net MVC 下的應(yīng)用吧。

您可能感興趣的文章: