最近忙啊。。。看到各位冬鞋都在认真写博客，认真敲代码，认真工作，总觉得自己时间太少，总觉得时间不够，老了。。。。。。

进正题：

上次不知从哪里（忘了）下载了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>&lt;span class="label"&gt;Default&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  <span class="label label-success">成功</span>

                </td>

                <td>

                  <code>&lt;span class="label label-success"&gt;Success&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  <span class="label label-warning">警告</span>

                </td>

                <td>

                  <code>&lt;span class="label label-warning"&gt;Warning&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  <span class="label label-important">重要</span>

                </td>

                <td>

                  <code>&lt;span class="label label-important"&gt;Important&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  <span class="label label-info">信息</span>

                </td>

                <td>

                  <code>&lt;span class="label label-info"&gt;Info&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  <span class="label label-inverse">反色</span>

                </td>

                <td>

                  <code>&lt;span class="label label-inverse"&gt;Inverse&lt;/span&gt;</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>&lt;span class="badge"&gt;1&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  成功

                </td>

                <td>

                  <span class="badge badge-success">2</span>

                </td>

                <td>

                  <code>&lt;span class="badge badge-success"&gt;2&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  警告

                </td>

                <td>

                  <span class="badge badge-warning">4</span>

                </td>

                <td>

                  <code>&lt;span class="badge badge-warning"&gt;4&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  重要

                </td>

                <td>

                  <span class="badge badge-important">6</span>

                </td>

                <td>

                  <code>&lt;span class="badge badge-important"&gt;6&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  信息

                </td>

                <td>

                  <span class="badge badge-info">8</span>

                </td>

                <td>

                  <code>&lt;span class="badge badge-info"&gt;8&lt;/span&gt;</code>

                </td>

              </tr>

              <tr>

                <td>

                  反色

                </td>

                <td>

                  <span class="badge badge-inverse">10</span>

                </td>

                <td>

                  <code>&lt;span class="badge badge-inverse"&gt;10&lt;/span&gt;</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>

bootstrap--小李子demo的更多相关文章

  1. 三石推荐！把 Bootstrap 小清新带回家！

    无敌传送门:http://fineui.com/demo_pro/default.aspx?theme=bootstrap1&menu=accordion   喜欢就来赞一个! 把麻烦留给三石 ...

  2. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  3. Ajax异步刷新局部页面的小李子

    看到下面那幅图没有,我们要的是当点击确定以后,根据条形码搜索出商品信息,并且异步刷新右边页面:

  4. 微信小程序demo

    微信小程序demo github地址 去年小程序刚发布时特别火,赶潮流做了个demo.感觉小程序开发还是比较简单的,主要是官方文档写得比较好,遗憾的是很多API需要微信认证才能使用. 由于小程序包大小 ...

  5. 微信小程序demo－环球小镇

    微信小程序-环球小镇说明:实现了环球小镇(huanqiuxiaozhen.com)移动端商城客户端部分功能,包括首页,分类,购物车,帐户,品牌列表,商品详情等功能.    项目下载:http://bb ...

  6. 近期热门微信小程序demo源码下载汇总

    近期微信小程序demo源码下载汇总,乃小程序学习分析必备素材!点击标题即可下载: 即速应用首发!原创!电商商场Demo 优质微信小程序推荐 -秀人美女图 图片下载.滑动翻页 微信小程序 - 新词 GE ...

  7. Mac上brew&thrift安装 以及在thrift架构下，自己新作了maven的小例 Demo

    1.缘由 前几天偶尔在网上看到thrift的信息,其内容和作用极大的引起了我的兴趣,因为我也是做iOS开发的,通过在网上的查询发现信息虽然很多实用的很少,容易误导他人,经过自己的成功实践,做了笔录,为 ...

  8. 1.类的加载机制_继承类的加载(一个小的Demo)说明

    今天我们先来一个小的Demo来了解类的加载顺序. public class ClassLoaderTest { public static void main(String[] args) { Sys ...

  9. 微信小游戏 demo 飞机大战 代码分析（四）(enemy.js， bullet.js, index.js)

    微信小游戏 demo 飞机大战 代码分析(四)(enemy.js, bullet.js, index.js) 微信小游戏 demo 飞机大战 代码分析(一)(main.js) 微信小游戏 demo 飞 ...

随机推荐

  1. js点击后将文字复制到剪贴板,将图片复制到剪贴板

    复制文字: <table width="99%" border="0" cellpadding="0" cellspacing=&qu ...

  2. 设置maven默认的JDK版本

    在pom文件中添加如下 : <build> <plugins> <plugin> <groupId>org.apache.maven.plugins&l ...

  3. git push error: A Contributor Agreement must be completed before uploading

    因为是从官方版本库做的镜像,所以有些权限直接从官方同步到了本地. 今天,有同事执行git push操作,报错: 根据网上搜索的内容,在gerrit.config中[auth]中添加如下内容: [aut ...

  4. log_format为Nginx设置日志格式

    nginx服务器日志相关指令主要有两条,一条是log_format,用来设置日志格式, 另外一条是access_log,用来指定日志文件的存放路径.格式和缓存大小,一般在nginx的配置文件中日记配置 ...

  5. stanford NLP学习笔记3：最小编辑距离（Minimum Edit Distance）

    I. 最小编辑距离的定义 最小编辑距离旨在定义两个字符串之间的相似度(word similarity).定义相似度可以用于拼写纠错,计算生物学上的序列比对,机器翻译,信息提取,语音识别等. 编辑距离就 ...

  6. 一个服务器要绑定多个HTTPS站点

    默认情况一个服务器的IIS只能绑定一个HTTPS也就是443端口 要实现多个站点对应HTTPS只能更改IIS配置 地址:C:\Windows\system32\inetsrv\config\appli ...

  7. Java中遍历Map集合的四种方法

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  8. sublime text 3 license 2016.05

    补充:2016.05 最近经过测试,3个注册码在新版3103的sublime上已经不可用了. 现补充两枚新版的license key: -– BEGIN LICENSE -– Michael Barn ...

  9. day9-paramiko

    一.基于用户名密码认证SSH连接 #!/usr/bin/env python #coding:utf8 import paramiko ssh = paramiko.SSHClient()#创建SSH ...

  10. html基础 链接

    使用图像来作链接: (链接标签中嵌套图片标签) <html> <body> <p> 您也可以使用图像来作链接: <a href="/example/ ...