bootstrap--小李子demo
最近忙啊。。。看到各位冬鞋都在认真写博客，认真敲代码，认真工作，总觉得自己时间太少，总觉得时间不够，老了。。。。。。
进正题：
上次不知从哪里（忘了）下载了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>
