Bootstrap是一款由Twitter推出的开源CSS框架，它的核心是由一系列用于Web前端开发的工具包组成。Bootstrap基于HTML、CSS和JavaScript，是一款非常适合敏捷Web开发的CSS框架，Bootstrap同时也是Github上最热门的开源项目之一。
Bootstrap的特点
强大的开发团队。Bootstrap由Twitter的设计师Mark Otto和Jacob Thornton合作开发，Bootstrap开发团队也是国际上公认最优秀的前端开发团队之一。 极简的框架。Bootstrap的设计非常简单，这就意味着，无论你是高级的前端设计师，还是普通的编程人员，都能够很快地掌握Bootstrap的开发流程和开发方式。 跨设备、跨浏览器最初设想的Bootstrap只支持现代浏览器，不过新版本已经能支持所有主流浏览器，甚至包括IE7。从Bootstrap 2开始，提供对平板和智能手机的支持。 完美的响应式设计。Bootstrap支持响应式布局，可以智能识别客户端浏览器的类型，从而构造适应当前设备前端布局，这一切都是全自动的。 支持HTML5和CSS3。Bootstrap支持所有的HTML5标签和CSS3属性。 使用LESS构建动态样式。当传统的枯燥CSS写法止步不前时，LESS技术横空出世。LESS使用变量、嵌套、操作、混合编码，帮助用户花费很小的时间成本，编写更快、更灵活的CSS。Bootstrap组件
Bootstrap的强大之处在于拥有丰富的组件，使用者们可以利用这些现有的组件快速地搭建出自己想要的界面。这些组件包括导航、导航条、面包屑、分页、下拉菜单、按钮组、按钮下拉菜单、排版、缩略图、警告对话框、进度条等。
利用Bootstrap构建一个简单的下拉菜单导航
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Bootstrap dropdown with navbar example</title>
<link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<a class="brand" href="#">w3cschool</a>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown" id="accountmenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Tutorials<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">PHP</a></li>
<li><a href="#">MySQL</a></li>
<li class="divider"></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML5</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<h1>Dropdown Example</h1>
</div>
<script type="text/javascript" src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>
<script type="text/javascript" src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
利用Bootstrap构建一个简单的按钮组合
代码：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 嵌套的按钮组</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="btn-group">
<button type="button" class="btn btn-default">按钮 1</button>
<button type="button" class="btn btn-default">按钮 2</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle"
data-toggle="dropdown">
下列
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">下拉链接 1</a></li>
<li><a href="#">下拉链接 2</a></li>
</ul>
</div>
</div>
</body>
</html>
利用Bootstrap构建一个彩色的进度条
代码
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 条纹的进度条</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 90%;">
<span class="sr-only">90% 完成（成功）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 30%;">
<span class="sr-only">30% 完成（信息）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-warning" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 20%;">
<span class="sr-only">20% 完成（警告）</span>
</div>
</div>
<div class="progress progress-striped">
<div class="progress-bar progress-bar-danger" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 10%;">
<span class="sr-only">10% 完成（危险）</span>
</div>
</div>
</body>
</html>
总结
除了上面的一些组件外，利用Bootstrap还可以非常轻松的构建一些网页常用组件。如果你对Bootstrap感兴趣，你也可以前往其官方网站了解更多信息。