<!DOCTYPE html> <html lang="zh_CN"> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> <link href="css/docs.css" rel="stylesheet"> <link href="css/google-code-prettify.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="span3 bs-docs-sidebar"> <ul class="nav nav-list bs-docs-sidenav"> <li><a href="#overview"><i class="icon-chevron-right"></i> 预览</a></li> <li><a href="#transitions"><i class="icon-chevron-right"></i> 过渡</a></li> <li><a href="#tableview"><i class="icon-chevron-right"></i> 表格</a></li> <li><a href="#dropdowns"><i class="icon-chevron-right"></i> 下拉菜单</a></li> <li><a href="#scrollspy"><i class="icon-chevron-right"></i> Scrollspy</a></li> <li><a href="#tabs"><i class="icon-chevron-right"></i> 选项卡</a></li> <li><a href="#tooltips"><i class="icon-chevron-right"></i> 工具提示</a></li> <li><a href="#popovers"><i class="icon-chevron-right"></i> Popover</a></li> <li><a href="#alerts"><i class="icon-chevron-right"></i> 警示</a></li> <li><a href="#buttons"><i class="icon-chevron-right"></i> 按钮</a></li> <li><a href="#collapse"><i class="icon-chevron-right"></i> 折叠</a></li> <li><a href="#carousel"><i class="icon-chevron-right"></i> 旋转木马</a></li> <li><a href="#typeahead"><i class="icon-chevron-right"></i> 预输入</a></li> <li><a href="#affix"><i class="icon-chevron-right"></i> 附件</a></li> </ul> </div> <div class="span9"> <div class="row-fluid"> <h1>内容栏</h1> </div> <section id="overview"> <div class="row-fluid"> <p class="muted"> 故事讲述<b>汤姆</b>从小就是个玩牌高手，所以他的好朋友，<i>肥皂、艾迪和培根</i>决定各凑两万五千英镑，让汤姆去参加一场黑社会高额赌金的牌局。 </p> <div class="text-right"> <small>来自 <cite title="《娱乐周刊》">《娱乐周刊》</cite></small> </div> <p class="text-warning"> <strong>汤姆</strong>从头到尾不知情，其实整个赌金根本就是个大骗局。于是汤姆不但输光所有的钱，还倒欠赌场主人五十万英镑。汤姆在一个星期内不能还清，他和他朋友们的手指和他老爸的酒吧都将不保。汤姆一伙想尽各种可能的凑钱办法，最后决定抢劫隔壁的毒犯。 </p> <p class="text-error"> 而隔壁的毒犯同时也正计划抢劫他们的毒品供应商。汤姆一伙的计划听起来简单，但执行时却状况百出。突发的状况让这伙人不由得越陷越深。事情变得十分复杂，场面变得十分混乱。几个小混混发现整个事件已经发展到超出他们的想象，于是极力想逃脱，但是已经…… </p> <address> <strong>王皓和小雪科技有限公司</strong><br> 山东，济南 经十西路 28723 号<br> 159 6577 9823 </address> <address> <strong>E-Mail</strong><br> <a href="#"> hello@example.com</a> </address> <p class="text-left">此致 敬礼</p> <p class="text-center">Franson</p> <p class="text-right">2016-06-09</p> </div> </section> <section id="transitions"> 比如 <code><section></code> 就应该是使用行内包装。<br> <pre>public class Student{<br> private String name; <br>}</pre> </section> <section id="tableview"> <table class="table table-striped"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>Wang</td> <td>fusen</td> <td>franson</td> </tr> <tr> <td>Li</td> <td>xiansheng</td> <td>franson</td> </tr> <tr> <td>Wang</td> <td>fusen</td> <td>franson</td> </tr> </tbody> <tfoot> <tr> <td>Hu</td> <td>min</td> <td>amin</td> </tr> </tfoot> </table> <p> 斑马纹表格 <code>.table-striped</code> <code>.table-hover</code> </p> <table class="table table-striped table-bordered table-hover"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>Wang</td> <td>fusen</td> <td>franson</td> </tr> <tr> <td>Li</td> <td>xiansheng</td> <td>franson</td> </tr> <tr> <td>Wang</td> <td>fusen</td> <td>franson</td> </tr> <tr> <td>Hu</td> <td>min</td> <td>amin</td> </tr> </tbody> </table> <p> 被压缩的表格 <code>.table-condensed</code> </p> <table class="table table-striped table-bordered table-hover table-condensed"> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr> <td>Wang</td> <td>fusen</td> <td>franson</td> </tr> <tr> <td>Li</td> <td>xiansheng</td> <td>franson</td> </tr> <tr> <td>Wang</td> <td>fusen</td> <td>franson</td> </tr> <tr> <td>Hu</td> <td>min</td> <td>amin</td> </tr> </tbody> </table> <p> 带颜色的行 <code>.success .error .warning .info</code> </p> <table class="table table-striped table-bordered table-hover"> <caption class="text-center text-info"> <strong>用户列表<code><caption></code></strong> </caption> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Username</th> </tr> </thead> <tbody> <tr class="success"> <td>success</td> <td>fusen</td> <td>franson</td> </tr> <tr class="warning"> <td>warning</td> <td>xiansheng</td> <td>franson</td> </tr> <tr class="error"> <td>error</td> <td>fusen</td> <td>franson</td> </tr> <tr class="info"> <td>info</td> <td>min</td> <td>amin</td> </tr> </tbody> </table> </section> <form action="#"> <fieldset> <legend>默认表单样式</legend> <label>用户名</label> <input type="text" placeholder="请输入用户名..."> <span class="help-block">这里是区块级别的帮助性文字</span> <label class="checkbox"> <input type="checkbox">勾选一下 </label> <input type="submit" class="btn" value="提交"> </fieldset> </form> <form action="#" class="form-search"> <fieldset> <legend>搜索表单</legend> <input type="text" class="search-query" placeholder="搜索内容..."> <input type="submit" class="search-query btn" value="查询"> </fieldset> </form> <form class="form-inline"> <fieldset> <legend>行内表单</legend> <input type="text" class="input-small" placeholder="Email..."> <input type="text" class="input-small" placeholder="密码..."> <label class="checkbox"><input type="checkbox">记住我</label> <input type="submit" class="btn"> </fieldset> </form> <form class="form-horizontal"> <fieldset> <legend>水平表单</legend> <div class="control-group"> <label class="control-label" for="inputEmail">Email</label> <div class="controls"> <input type="text" id="inputEmail" placeholder="Email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputPassword">密码</label> <div class="controls"> <input type="password" id="inputPassword" placeholder="密码"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> 记住我 </label> <button type="submit" class="btn">登录</button> </div> </div> </fieldset> </form> <form class="form-horizontal"> <fieldset> <legend>水平表单2</legend> <div class="controls"> <label>Email</label> <input type="text" id="inputEmail" placeholder="Email"> <label>密码</label> <input type="password" id="inputPassword" placeholder="密码"> <label>自我介绍</label> <textarea rows=3></textarea> <label class="checkbox"> <input type="checkbox"> 记住我 </label> <button type="submit" class="btn">登录</button> </div> </fieldset> </form> <form> <fieldset> <legend>复选框与单选框</legend> <label class="checkbox"><input type="checkbox" value="">选项一</label> <label class="checkbox"><input type="checkbox" value=""> 选项二</label> <label class="color"> <input type="color">颜色选择 </label> <br> <label class="radio"><input type="radio" name="options" value="">选择一</label> <label class="radio"><input type="radio" name="options" value="">选择二</label> </fieldset> </form> <form> <fieldset> <legend>行内复选框与单选框</legend> <label class="checkbox inline"><input type="checkbox" value="">选项一</label> <label class="checkbox inline"><input type="checkbox" value=""> 选项二</label> <label class="radio inline"><input type="radio" name="options" value="">选择一</label> <label class="radio inline"><input type="radio" name="options" value="">选择二</label> </fieldset> </form> <form> <fieldset> <legend>下拉框选项</legend> <select> <optgroup label="你的日常生活"> <option value="">吃饭</option> <option value="">睡觉</option> <option value="">打豆豆</option> </optgroup> </select><br> <select multiple="multiple"> <optgroup label="你的日常生活"> <option value="">吃饭</option> <option value="">睡觉</option> <option value="">打豆豆</option> </optgroup> </select> </fieldset> </form> <div class="input-prepend input-append"> <input class="span6" placeholder="输入数值..." id="appendedPrependedInput" type="text"> <input type="button" value="搜索" class="btn"> <input type="button" value="选项" class="btn"> </div> <div class="input-append"> <input class="span2" id="appendedDropdownButton" type="text"> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> 搜索 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li>用户</li> <li>人物</li> <li>电影</li> </ul> </div> </div> <a href="#" class="btn">我是链接<i class="icon-search"></i></a> </div> </div> </div> <script src="js/jquery.js"></script> <script src="js/application.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
![web中通过注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>版本](https://www.itgh.cn/zb_users/theme/ydblog/include/random/13.png "web中通过注释判断浏览器<!--[if !IE]><!--[if IE]><!--[if lt IE 6]><!--[if gte IE 6]>版本")