最近忙啊。。。看到各位冬鞋都在认真写博客，认真敲代码，认真工作，总觉得自己时间太少，总觉得时间不够，老了。。。。。。
进正题：
上次不知从哪里（忘了）下载了bootstrap的一些使用小demo，以后要用，就不用去官网（http://v3.bootcss.com/）查，当然小李子里面查不到，再去官网查也好，好东西要分享：
css跟js，不用自己写。按照如下建立目录即可：
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>BootStrap Demo</title>
</head>
<link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
/* 公共样式 S */
body{margin:20px 20px 20px 20px}
h1, h2, h3, .masthead p, .subhead p, .marketing h2, .lead {font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"宋体",simsun,sans-serif;font-weight: normal;}
/* 公共样式 E */
/* 用于栅格系统示例的样式 S */
.show-grid [class*="span"] {
background-color: #EEEEEE;
border-radius: 3px 3px 3px 3px;
line-height: 40px;
min-height: 40px;
text-align: center;
}
.show-grid {
margin-bottom: 20px;
margin-top: 10px;
}
.show-grid [class*="span"]:hover {
background-color: #DDDDDD;
}
.show-grid [class*="span"] [class*="span"] {
background-color: #CCCCCC;
}
.show-grid .show-grid [class*="span"] {
margin-top: 5px;
}
.show-grid [class*="span"] [class*="span"] [class*="span"] {
background-color: red;
}
/* 用于栅格系统示例的样式 E */
/* 用于表达的样式 S */
.bs-docs-example:after {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #9DA0A4;
content: "示例：";
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 3px 7px;
position: absolute;
top: -1px;
}
form.bs-docs-example {
padding-bottom: 19px;
}
.bs-docs-example {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-radius: 4px 4px 4px 4px;
margin: 15px 0;
padding: 39px 19px 14px;
position: relative;
} /* 用于表达的样式 E */
</style>
<body>
<!-- 栅格系统示例 S -->
<!-- Bootstrap默认的栅格系统为12列 ，形成一个940px宽的容器，默认没有启用 响应式布局特性 。如果加入响应式布局CSS文件，栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下，列将不再固定并且会在垂直方向堆叠。 -->
<section>
<h2>栅格系统示例</h2>
<div class="row show-grid">
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
<div class="span1" data-original-title="" title="">1</div>
</div>
<div class="row show-grid">
<div class="span2" data-original-title="" title="">2</div>
<div class="span3" data-original-title="" title="">3</div>
<div class="span4" data-original-title="" title="">4</div>
</div>
<div class="row show-grid">
<div class="span4" data-original-title="" title="">4</div>
<div class="span5" data-original-title="" title="">5</div>
</div>
<div class="row show-grid">
<div class="span9" data-original-title="" title="">9</div>
</div>
<h2>偏移列</h2>
<div class="row show-grid">
<div class="span4" data-original-title="" title="">4</div>
<div class="span3 offset2">3 offset 2</div>
</div>
<div class="row show-grid">
<div class="span3 offset1" data-original-title="" title="">3 offset 1</div>
<div class="span3 offset2">3 offset 2</div>
</div>
<div class="row show-grid">
<div class="span6 offset3" data-original-title="" title="">6 offset 3</div>
</div>
<h2>嵌套列</h2>
<div class="row show-grid">
<div class="span9" data-original-title="" title="">
Level 1 column
<div class="row show-grid">
<div class="span6" data-original-title="" title="">Level 2</div>
<div class="span3">Level 2</div>
</div>
</div>
</div>
</section>
<!-- 栅格系统示例 E -->
<!-- 流式栅格系统案例 S -->
<!-- 流式栅格系统对每一列的宽度使用百分比而不是像素数量。它和固定栅格系统一样拥有响应式布局的能力，这就保证它能对不同的分辨率和设备做出适当的调整。 -->
<section>
<h2>流式栅格系统案例</h2>
<div class="row-fluid show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
<div class="span1">1</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4">4</div>
<div class="span4">4</div>
</div>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span8">8</div>
</div>
<div class="row-fluid show-grid">
<div class="span6">6</div>
<div class="span6">6</div>
</div>
<div class="row-fluid show-grid">
<div class="span12">12</div>
</div>
<h2>流式栅格的偏移</h2>
<div class="row-fluid show-grid">
<div class="span4">4</div>
<div class="span4 offset4">4 offset 4</div>
</div>
<div class="row-fluid show-grid">
<div class="span3 offset3">3 offset 3</div>
<div class="span3 offset3">3 offset 3</div>
</div>
<div class="row-fluid show-grid">
<div class="span6 offset6">6 offset 6</div>
</div>
<h2>流式嵌套布局</h2>
<div class="row-fluid show-grid">
<div class="span12">Fluid 12
<div class="row-fluid show-grid">
<div class="span6">Fluid 6
<div class="row-fluid show-grid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
</section>
<!-- 流式栅格系统案例 E -->
<!-- 表格 S -->
<section>
<h2>表格默认样式</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h2>表格间隔颜色效果</h2>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h2>表格加边框和圆角和跨行跨列效果</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h2>表格每行的鼠标悬浮事件</h2>
<table class="table table-hover">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h2>表格每个单元格的内补(padding)减半可使表格更紧凑</h2>
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<h2>表格给行添加颜色</h2>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Product</th>
<th>Payment Taken</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
<tr class="error">
<td>2</td>
<td>TB - Monthly</td>
<td>02/04/2012</td>
<td>Declined</td>
</tr>
<tr class="warning">
<td>3</td>
<td>TB - Monthly</td>
<td>03/04/2012</td>
<td>Pending</td>
</tr>
<tr class="info">
<td>4</td>
<td>TB - Monthly</td>
<td>04/04/2012</td>
<td>Call in to confirm</td>
</tr>
</tbody>
</table>
</section>
<!-- 表格 E -->
<!-- 表单 S -->
<section>
<h2>表单默认样式</h2>
<form class="bs-docs-example">
<fieldset>
<legend>标题</legend>
<label>标签名称</label>
<input type="text" placeholder="更多…">
<span class="help-block">这是BootStrap的实例.</span>
<label class="checkbox">
<input type="checkbox"> 点击我
</label>
<button class="btn" type="submit">提交</button>
</fieldset>
</form>
<h2>表单输入框圆角效果</h2>
<form class="bs-docs-example form-search">
<input type="text" class="input-medium search-query">
<button class="btn" type="submit">查询</button>
</form>
<h2>表单排成一行</h2>
<form class="bs-docs-example form-inline">
<input type="text" placeholder="电子邮件" class="input-small">
<input type="password" placeholder="用户密码" class="input-small">
<label class="checkbox">
<input type="checkbox"> 记住我
</label>
<button class="btn" type="submit">登 录</button>
</form>
<h2>表单排成多行</h2>
<form class="bs-docs-example form-horizontal">
<div class="control-group">
<label for="inputEmail" class="control-label">电子邮件</label>
<div class="controls">
<input type="text" placeholder="邮件地址" id="inputEmail">
</div>
</div>
<div class="control-group">
<label for="inputPassword" class="control-label">用户密码</label>
<div class="controls">
<input type="password" placeholder="密码" id="inputPassword">
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox"> 记住我
</label>
<button class="btn" type="submit">登 录</button>
</div>
</div>
</form>
<h2>表单的下拉框</h2>
<form class="bs-docs-example">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="multiple">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</form>
<h2>扩展表单前缀与后缀</h2>
<form class="bs-docs-example">
<div class="input-prepend">
<span class="add-on">@</span>
<input type="text" placeholder="用户名" id="prependedInput" class="span2">
</div>
<br>
<div class="input-append">
<input type="text" id="appendedInput" placeholder="输入金额" class="span2">
<span class="add-on">.00</span>
</div>
</form>
<h2>扩展表单前缀与后缀组合在一起</h2>
<form class="bs-docs-example form-inline">
<div class="input-prepend input-append">
<span class="add-on">$</span>
<input type="text" id="appendedPrependedInput" class="span2">
<span class="add-on">.00</span>
</div>
</form>
<h2>扩展表单加按钮</h2>
<form class="bs-docs-example">
<div class="input-append">
<input type="text" id="appendedInputButton" class="span2">
<button type="button" class="btn">滚!</button>
</div>
</form>
<form class="bs-docs-example">
<div class="input-append">
<input type="text" id="appendedInputButtons" class="span2">
<button type="button" class="btn">查询</button>
<button type="button" class="btn">相关信息</button>
</div>
</form>
<h2>扩展表单下拉菜单</h2>
<form class="bs-docs-example">
<div class="input-append">
<input type="text" id="appendedDropdownButton" class="span2">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">小事件</a></li>
<li><a href="#">大事件</a></li>
<li><a href="#">超大事件</a></li>
<li class="divider"></li>
<li><a href="#">分割线</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-append -->
</form>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">小事件</a></li>
<li><a href="#">大事件</a></li>
<li><a href="#">超大事件</a></li>
<li class="divider"></li>
<li><a href="#">分割线</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" id="prependedDropdownButton" class="span2">
</div><!-- /input-prepend -->
</form>
<form class="bs-docs-example">
<div class="input-prepend input-append">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">小事件</a></li>
<li><a href="#">大事件</a></li>
<li><a href="#">超大事件</a></li>
<li class="divider"></li>
<li><a href="#">分割线</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" id="appendedPrependedDropdownButton" class="span2">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">下拉按钮 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">小事件</a></li>
<li><a href="#">大事件</a></li>
<li><a href="#">超大事件</a></li>
<li class="divider"></li>
<li><a href="#">分割线</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-prepend input-append -->
</form>
<h2>扩展表单分段式下拉菜组</h2>
<form class="bs-docs-example">
<div class="input-prepend">
<div class="btn-group">
<button tabindex="-1" class="btn">下拉按钮</button>
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">小事件</a></li>
<li><a href="#">大事件</a></li>
<li><a href="#">超大事件</a></li>
<li class="divider"></li>
<li><a href="#">分割线</a></li>
</ul>
</div>
<input type="text">
</div>
<div class="input-append">
<input type="text">
<div class="btn-group">
<button tabindex="-1" class="btn">下拉按钮</button>
<button tabindex="-1" data-toggle="dropdown" class="btn dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">小事件</a></li>
<li><a href="#">大事件</a></li>
<li><a href="#">超大事件</a></li>
<li class="divider"></li>
<li><a href="#">分割线</a></li>
</ul>
</div>
</div>
</form>
<h2>扩展表单搜索表单</h2>
<form class="bs-docs-example form-search">
<div class="input-append">
<input type="text" class="span2 search-query">
<button class="btn" type="submit">搜索</button>
</div>
<div class="input-prepend">
<button class="btn" type="submit">搜索</button>
<input type="text" class="span2 search-query">
</div>
</form>
<h2>表单输入框布局</h2>
<form style="padding-bottom: 15px;" class="bs-docs-example">
<div class="controls">
<input type="text" placeholder=".span5" class="span5">
</div>
<div class="controls controls-row">
<input type="text" placeholder=".span4" class="span4">
<input type="text" placeholder=".span1" class="span1">
</div>
<div class="controls controls-row">
<input type="text" placeholder=".span3" class="span3">
<input type="text" placeholder=".span2" class="span2">
</div>
<div class="controls controls-row">
<input type="text" placeholder=".span2" class="span2">
<input type="text" placeholder=".span3" class="span3">
</div>
<div class="controls controls-row">
<input type="text" placeholder=".span1" class="span1">
<input type="text" placeholder=".span4" class="span4">
</div>
</form>
<h2>表单丰富多彩的颜色</h2>
<form class="bs-docs-example form-horizontal">
<div class="control-group warning">
<label for="inputWarning" class="control-label">Input with warning</label>
<div class="controls">
<input type="text" id="inputWarning">
<span class="help-inline">Something may have gone wrong</span>
</div>
</div>
<div class="control-group error">
<label for="inputError" class="control-label">Input with error</label>
<div class="controls">
<input type="text" id="inputError">
<span class="help-inline">Please correct the error</span>
</div>
</div>
<div class="control-group info">
<label for="inputInfo" class="control-label">Input with info</label>
<div class="controls">
<input type="text" id="inputInfo">
<span class="help-inline">Username is taken</span>
</div>
</div>
<div class="control-group success">
<label for="inputSuccess" class="control-label">Input with success</label>
<div class="controls">
<input type="text" id="inputSuccess">
<span class="help-inline">Woohoo!</span>
</div>
</div>
</form>
</section>
<!-- 表单 E -->
<!-- 按钮 S -->
<section>
<h2>按钮默认样式</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>按钮</th>
<th>class=""</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><button class="btn" type="button">默认</button></td>
<td><code>btn</code></td>
<td>带渐变的标准灰色按钮</td>
</tr>
<tr>
<td><button class="btn btn-primary" type="button">主要</button></td>
<td><code>btn btn-primary</code></td>
<td>提供额外的视觉感, 可在一系列的按钮中指出主要操作</td>
</tr>
<tr>
<td><button class="btn btn-info" type="button">信息</button></td>
<td><code>btn btn-info</code></td>
<td>默认样式的替代样式</td>
</tr>
<tr>
<td><button class="btn btn-success" type="button">成功</button></td>
<td><code>btn btn-success</code></td>
<td>表示成功或积极的动作</td>
</tr>
<tr>
<td><button class="btn btn-warning" type="button">警告</button></td>
<td><code>btn btn-warning</code></td>
<td>提醒应该谨慎采取这个动作</td>
</tr>
<tr>
<td><button class="btn btn-danger" type="button">危险</button></td>
<td><code>btn btn-danger</code></td>
<td>表示这个动作危险或存在危险</td>
</tr>
<tr>
<td><button class="btn btn-inverse" type="button">反向</button></td>
<td><code>btn btn-inverse</code></td>
<td>备用的暗灰色按钮，不依赖于语义和用途</td>
</tr>
<tr>
<td><button class="btn btn-link" type="button">链接</button></td>
<td><code>btn btn-link</code></td>
<td>简化一个按钮, 使它看起来像一个链接，同时保持按钮的行为</td>
</tr>
</tbody>
</table>
<h2>按钮大小</h2>
<div class="bs-docs-example">
<p>
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
</p>
<p>
<button class="btn btn-primary" type="button">Default button</button>
<button class="btn" type="button">Default button</button>
</p>
<p>
<button class="btn btn-small btn-primary" type="button">Small button</button>
<button class="btn btn-small" type="button">Small button</button>
</p>
<p>
<button class="btn btn-mini btn-primary" type="button">Mini button</button>
<button class="btn btn-mini" type="button">Mini button</button>
</p>
</div>
<h2>变成块级(Block)按钮</h2>
<div class="bs-docs-example">
<div style="max-width: 400px; margin: 0 auto 10px;" class="well">
<button class="btn btn-large btn-block btn-primary" type="button">Block level button</button>
<button class="btn btn-large btn-block" type="button">Block level button</button>
</div>
</div>
</section>
<!-- 按钮 E -->
<!-- 图片 S -->
<section>
<h2>图片默认</h2>
<div class="bs-docs-example bs-docs-example-images">
<img class="img-rounded" data-src="holder.js/140x140" alt="140x140" style="width: 140px; height: 140px;" src="img/1.jpg">
<img class="img-circle" data-src="holder.js/140x140" alt="140x140" style="width: 140px; height: 140px;" src="img/2.jpg">
<img class="img-polaroid" data-src="holder.js/140x140" alt="140x140" style="width: 140px; height: 140px;" src="img/3.jpg">
</div>
<h2>图标案例</h2>
<div class="bs-docs-example">
<div class="btn-toolbar">
<div class="btn-group">
<a href="#" class="btn"><i class="icon-align-left"></i></a>
<a href="#" class="btn"><i class="icon-align-center"></i></a>
<a href="#" class="btn"><i class="icon-align-right"></i></a>
<a href="#" class="btn"><i class="icon-align-justify"></i></a>
</div>
</div>
</div>
<h2>图标案例按钮组中下拉菜单</h2>
<div class="bs-docs-example">
<div class="btn-group">
<a href="#" class="btn btn-primary"><i class="icon-user icon-white"></i> User</a>
<a href="#" data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
<li><a href="#"><i class="icon-trash"></i> Delete</a></li>
<li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
<li class="divider"></li>
<li><a href="#"><i class="i"></i> Make admin</a></li>
</ul>
</div>
</div>
<h2>图标案例导航</h2>
<div class="bs-docs-example">
<div style="padding: 8px 0; margin-bottom: 0;" class="well">
<ul class="nav nav-list">
<li class="active"><a href="#"><i class="icon-home icon-white"></i> 首页</a></li>
<li><a href="#"><i class="icon-book"></i> 存档</a></li>
<li><a href="#"><i class="icon-pencil"></i> 应用程序</a></li>
<li><a href="#"><i class="i"></i> Misc</a></li>
</ul>
</div>
</div>
<h2>图标案例表单域</h2>
<form class="bs-docs-example form-horizontal">
<div class="control-group">
<label for="inputIcon" class="control-label">电子邮件</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on"><i class="icon-envelope"></i></span><input type="text" id="inputIcon" class="span2">
</div>
</div>
</div>
</form>
</section>
<!-- 图片 E -->
<!-- 实际案例 S -->
<section>
<h2>下拉菜单的子菜单</h2>
<div class="bs-docs-example bs-docs-example-submenus">
<div class="pull-left" style="margin-right:40px;">
<p class="muted">默认样式</p>
<div class="dropdown clearfix">
<ul aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
<li><a href="#" tabindex="-1">Action</a></li>
<li><a href="#" tabindex="-1">Another action</a></li>
<li><a href="#" tabindex="-1">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">More options</a>
<ul class="dropdown-menu">
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left" style="margin-right:40px;">
<p class="muted">向上弹出的子菜单</p>
<div class="dropup">
<ul aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
<li><a href="#" tabindex="-1">Action</a></li>
<li><a href="#" tabindex="-1">Another action</a></li>
<li><a href="#" tabindex="-1">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#" tabindex="-1">More options</a>
<ul class="dropdown-menu">
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div class="pull-left" style="margin-right:40px;">
<p class="muted">左侧弹出的子菜单</p>
<div class="dropdown">
<ul aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
<li><a href="#" tabindex="-1">Action</a></li>
<li><a href="#" tabindex="-1">Another action</a></li>
<li><a href="#" tabindex="-1">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-submenu pull-left">
<a href="#" tabindex="-1">More options</a>
<ul class="dropdown-menu">
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
<li><a href="#" tabindex="-1">Second level link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<h2>单一按钮组</h2>
<div class="bs-docs-example">
<div style="margin: 9px 0 5px;" class="btn-group">
<button class="btn">Left</button>
<button class="btn">Middle</button>
<button class="btn">Right</button>
</div>
</div>
<h2>多维按钮组</h2>
<div class="bs-docs-example">
<div style="margin: 0;" class="btn-toolbar">
<div class="btn-group">
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</div>
<div class="btn-group">
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
</div>
<div class="btn-group">
<button class="btn">8</button>
</div>
</div>
</div>
<h2>垂直按钮组</h2>
<div class="bs-docs-example">
<div class="btn-group btn-group-vertical">
<button class="btn" type="button"><i class="icon-align-left"></i></button>
<button class="btn" type="button"><i class="icon-align-center"></i></button>
<button class="btn" type="button"><i class="icon-align-right"></i></button>
<button class="btn" type="button"><i class="icon-align-justify"></i></button>
</div>
</div>
<h2>各种颜色的下拉框</h2>
<div class="bs-docs-example">
<div style="margin: 0;" class="btn-toolbar">
<div class="btn-group">
<button data-toggle="dropdown" class="btn dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle">Danger <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">Warning <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-success dropdown-toggle">Success <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-info dropdown-toggle">Info <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle">Inverse <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
<h2>各种颜色的分裂式按钮下拉菜单</h2>
<div class="bs-docs-example">
<div style="margin: 0;" class="btn-toolbar">
<div class="btn-group">
<button class="btn">Action</button>
<button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-primary">Action</button>
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-danger">Danger</button>
<button data-toggle="dropdown" class="btn btn-danger dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-warning">Warning</button>
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-success">Success</button>
<button data-toggle="dropdown" class="btn btn-success dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-info">Info</button>
<button data-toggle="dropdown" class="btn btn-info dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button class="btn btn-inverse">Inverse</button>
<button data-toggle="dropdown" class="btn btn-inverse dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
</div>
<h2>向上弹出式菜单</h2>
<div class="bs-docs-example">
<div style="margin: 0;" class="btn-toolbar">
<div class="btn-group dropup">
<button class="btn">Dropup</button>
<button data-toggle="dropdown" class="btn dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button class="btn primary">Right dropup</button>
<button data-toggle="dropdown" class="btn primary dropdown-toggle"><span class="caret"></span></button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>
</div>
<h2>基本标签页</h2>
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">文件</a></li>
<li><a href="#">信息</a></li>
</ul>
</div>
<h2>基本pills</h2>
<div class="bs-docs-example">
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">文件</a></li>
<li><a href="#">信息</a></li>
</ul>
</div>
<h2>堆叠式排列的标签页</h2>
<div class="bs-docs-example">
<ul class="nav nav-tabs nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">文件</a></li>
<li><a href="#">信息</a></li>
</ul>
</div>
<h2>堆叠式排列的pills</h2>
<div class="bs-docs-example">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">文件</a></li>
<li><a href="#">信息</a></li>
</ul>
</div>
<h2>标签页带下拉框</h2>
<div class="bs-docs-example">
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">帮助</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">下拉框 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<h2>超强导航条</h2>
<div class="bs-docs-example">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a data-target=".navbar-responsive-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">标题</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="查询" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">链接3</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>
<h2>反色超强导航条</h2>
<div class="bs-docs-example">
<div style="position: static;" class="navbar navbar-inverse">
<div class="navbar-inner">
<div class="container">
<a data-target=".navbar-inverse-collapse" data-toggle="collapse" class="btn btn-navbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a href="#" class="brand">标题</a>
<div class="nav-collapse collapse navbar-inverse-collapse">
<ul class="nav">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form action="" class="navbar-search pull-left">
<input type="text" placeholder="查询" class="search-query span2">
</form>
<ul class="nav pull-right">
<li><a href="#">链接3</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">下拉框 <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div>
</div><!-- /navbar-inner -->
</div><!-- /navbar -->
</div>
<h2>面包屑</h2>
<div class="bs-docs-example">
<ul class="breadcrumb">
<li class="active">首页</li>
</ul>
<ul class="breadcrumb">
<li><a href="#">首页</a> <span class="divider">/</span></li>
<li class="active">类库</li>
</ul>
<ul style="margin-bottom: 5px;" class="breadcrumb">
<li><a href="#">首页</a> <span class="divider">/</span></li>
<li><a href="#">类库</a> <span class="divider">/</span></li>
<li class="active">数据</li>
</ul>
</div>
<h2>分页条居左</h2>
<div class="bs-docs-example">
<div class="pagination">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<h2>分页条居中</h2>
<div class="bs-docs-example">
<div class="pagination pagination-centered">
<ul>
<li class="disabled"><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<h2>分页条居右</h2>
<div class="bs-docs-example">
<div class="pagination pagination-right">
<ul>
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
<h2>翻页</h2>
<div class="bs-docs-example">
<ul class="pager">
<li><a href="#">前一页</a></li>
<li><a href="#">后一页</a></li>
</ul>
</div>
<div class="bs-docs-example">
<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>
</div>
<h2>标签</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>标签</th>
<th>标记</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="label">默认样式</span>
</td>
<td>
<code><span class="label">Default</span></code>
</td>
</tr>
<tr>
<td>
<span class="label label-success">成功</span>
</td>
<td>
<code><span class="label label-success">Success</span></code>
</td>
</tr>
<tr>
<td>
<span class="label label-warning">警告</span>
</td>
<td>
<code><span class="label label-warning">Warning</span></code>
</td>
</tr>
<tr>
<td>
<span class="label label-important">重要</span>
</td>
<td>
<code><span class="label label-important">Important</span></code>
</td>
</tr>
<tr>
<td>
<span class="label label-info">信息</span>
</td>
<td>
<code><span class="label label-info">Info</span></code>
</td>
</tr>
<tr>
<td>
<span class="label label-inverse">反色</span>
</td>
<td>
<code><span class="label label-inverse">Inverse</span></code>
</td>
</tr>
</tbody>
</table>
<h2>徽章</h2>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>名称</th>
<th>案例</th>
<th>标记</th>
</tr>
</thead>
<tbody>
<tr>
<td>
默认样式
</td>
<td>
<span class="badge">1</span>
</td>
<td>
<code><span class="badge">1</span></code>
</td>
</tr>
<tr>
<td>
成功
</td>
<td>
<span class="badge badge-success">2</span>
</td>
<td>
<code><span class="badge badge-success">2</span></code>
</td>
</tr>
<tr>
<td>
警告
</td>
<td>
<span class="badge badge-warning">4</span>
</td>
<td>
<code><span class="badge badge-warning">4</span></code>
</td>
</tr>
<tr>
<td>
重要
</td>
<td>
<span class="badge badge-important">6</span>
</td>
<td>
<code><span class="badge badge-important">6</span></code>
</td>
</tr>
<tr>
<td>
信息
</td>
<td>
<span class="badge badge-info">8</span>
</td>
<td>
<code><span class="badge badge-info">8</span></code>
</td>
</tr>
<tr>
<td>
反色
</td>
<td>
<span class="badge badge-inverse">10</span>
</td>
<td>
<code><span class="badge badge-inverse">10</span></code>
</td>
</tr>
</tbody>
</table>
<h2>警告提示</h2>
<div class="bs-docs-example">
<div class="alert">
<button data-dismiss="alert" class="close" type="button">×</button>
<strong>Warning!</strong> Best check yo self, you're not looking too good.
</div>
</div>
<h2>错误或危险提示</h2>
<div class="bs-docs-example">
<div class="alert alert-error">
<button data-dismiss="alert" class="close" type="button">×</button>
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
</div>
<h2>成功提示</h2>
<div class="bs-docs-example">
<div class="alert alert-success">
<button data-dismiss="alert" class="close" type="button">×</button>
<strong>Well done!</strong> You successfully read this important alert message.
</div>
</div>
<h2>警告提示</h2>
<div class="bs-docs-example">
<div class="alert alert-info">
<button data-dismiss="alert" class="close" type="button">×</button>
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
</div>
<h2>进度条基本样式</h2>
<div class="bs-docs-example">
<div class="progress">
<div style="width: 60%;" class="bar"></div>
</div>
</div>
<h2>进度条动画样式</h2>
<div class="bs-docs-example">
<div class="progress progress-striped">
<div style="width: 20%;" class="bar"></div>
</div>
</div>
<h2>进度条堆叠样式</h2>
<div class="bs-docs-example">
<div class="progress">
<div style="width: 35%" class="bar bar-success"></div>
<div style="width: 20%" class="bar bar-warning"></div>
<div style="width: 10%" class="bar bar-danger"></div>
</div>
</div>
<h2>进度条更多颜色的选择</h2>
<div class="bs-docs-example">
<div style="margin-bottom: 9px;" class="progress progress-info">
<div style="width: 20%" class="bar"></div>
</div>
<div style="margin-bottom: 9px;" class="progress progress-success">
<div style="width: 40%" class="bar"></div>
</div>
<div style="margin-bottom: 9px;" class="progress progress-warning">
<div style="width: 60%" class="bar"></div>
</div>
<div class="progress progress-danger">
<div style="width: 80%" class="bar"></div>
</div>
</div>
<h2>进度条更多动画的选择</h2>
<div class="bs-docs-example">
<div style="margin-bottom: 9px;" class="progress progress-info progress-striped">
<div style="width: 20%" class="bar"></div>
</div>
<div style="margin-bottom: 9px;" class="progress progress-success progress-striped">
<div style="width: 40%" class="bar"></div>
</div>
<div style="margin-bottom: 9px;" class="progress progress-warning progress-striped">
<div style="width: 60%" class="bar"></div>
</div>
<div class="progress progress-danger progress-striped">
<div style="width: 80%" class="bar"></div>
</div>
</div>
</section>
<!-- 实际案例 E -->
</body>
</html>