1. 簡介
Bootstrap是Twitter推出的一個(gè)開源的前端框架。
Bootstrap由Twitter的設(shè)計(jì)師Mark Otto和Jacob Thornton合作開發(fā)，由動(dòng)態(tài)語言Less寫成。它是一套“易用、優(yōu)雅、靈活、可擴(kuò)展”的前端工具集，提供了優(yōu)雅的HTML/CSS規(guī)范。
Bootstrap一經(jīng)推出后頗受歡迎，一直是GitHub上的熱門開源項(xiàng)目,包括MSNBC（微軟全國廣播公司）的Breaking News都使用了該項(xiàng)目。
Bootstrap兼容于所有主流瀏覽器，包括各種移動(dòng)設(shè)備。
2. 下載和使用
Bootstrap建立了一個(gè)響應(yīng)式的12網(wǎng)格布局系統(tǒng)，它引入了fixed和fluid-with兩種布局方式，可以快速構(gòu)建Web應(yīng)用。目前Bootstrap最新版本為3.0.0，可以在Bootstrap的官方網(wǎng)站http://twitter.github.com/bootstrap/上下載源碼。
Bootstrap使用非常簡單，打開任何文本編輯器，新建一個(gè)文件并命名為：test.html, 在該文件開始處添加Bootstrap框架代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<script src="jQuery.js"></script>
<script src="bootstrap.js"></script>
<link href="bootstrap.css" rel="stylesheet">
</head>
從上面的代碼可以看到：Bootstrap基于JQuery構(gòu)建，所以需先引入JQuery。Bootstrap框架代碼包括了bootstrap.js和bootstrap.css兩個(gè)文件。
然后，我們可以將如下代碼替換body元素的內(nèi)容：
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</div>
</div>
<div class="span9">
<div class="hero-unit">
<h1>Hello world!</h1>
</div>
</div>
</div>
</div>
</body>
上面的代碼中，我們采用流式布局構(gòu)建，將頁面分成兩部分：左邊是7個(gè)鏈接，占3個(gè)寬度；右邊是一個(gè)Hello world的標(biāo)題，占9個(gè)寬度。效果如下：
圖1
對上面的Hello world應(yīng)用稍作改變，我們可以實(shí)現(xiàn)一個(gè)簡單的HTML5介紹網(wǎng)站。將test.html頁面的body元素中的內(nèi)容替換成如下代碼：
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Sections</li>
<li><a href="#">HTML5 Introduction</a></li>
<li><a href="#">HTML5 Course</a></li>
<li><a href="#">HTML5 Drag</a></li>
<li><a href="#">HTML5 Geolocation</a></li>
<li><a href="#">HTML5 Audio</a></li>
<li><a href="#">HTML5 Vedio</a></li>
<li><a href="#">HTML5 Canvas</a></li>
</ul>
</div>
</div>
<div class="span9">
<div class="hero-unit">
<h1>Welcome to HTML5!</h1>
</div>
<div class="row-fluid">
<div class="span4">
<h2>HTML5 Introduction</h2>
<p>HTML5 Introduction... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>HTML5 Course</h2>
<p>HTML5 Course... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>HTML5 Drag</h2>
<p>HTML5 Drag... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<h2>HTML5 Audio</h2>
<p>HTML5 Audio... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>HTML5 Vedio</h2>
<p>HTML5 Vedio... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
<div class="span4">
<h2>HTML5 Canvas</h2>
<p>HTML5 Canvas... </p>
<p><a class="btn" href="#">View details »</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
效果如下圖所示：