1. 簡介
Bootstrap是Twitter推出的一個開源的前端框架。
Bootstrap由Twitter的設計師Mark Otto和Jacob Thornton合作開發，由動態語言Less寫成。它是一套“易用、優雅、靈活、可擴展”的前端工具集，提供了優雅的HTML/CSS規范。
Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目,包括MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。
Bootstrap兼容于所有主流瀏覽器，包括各種移動設備。
2. 下載和使用
Bootstrap建立了一個響應式的12網格布局系統，它引入了fixed和fluid-with兩種布局方式，可以快速構建Web應用。目前Bootstrap最新版本為3.0.0，可以在Bootstrap的官方網站http://twitter.github.com/bootstrap/上下載源碼。
Bootstrap使用非常簡單，打開任何文本編輯器，新建一個文件并命名為：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構建，所以需先引入JQuery。Bootstrap框架代碼包括了bootstrap.js和bootstrap.css兩個文件。
然后，我們可以將如下代碼替換body元素的內容：
<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>
上面的代碼中，我們采用流式布局構建，將頁面分成兩部分：左邊是7個鏈接，占3個寬度；右邊是一個Hello world的標題，占9個寬度。效果如下：
圖1
對上面的Hello world應用稍作改變，我們可以實現一個簡單的HTML5介紹網站。將test.html頁面的body元素中的內容替換成如下代碼：
<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>
效果如下圖所示：