IT干货网

bootstrap2.3.2常用标签的使用

sanshao 2022年03月12日 编程设计 196 0
<!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"> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;故事讲述<b>汤姆</b>从小就是个玩牌高手,所以他的好朋友,<i>肥皂、艾迪和培根</i>决定各凑两万五千英镑,让汤姆去参加一场黑社会高额赌金的牌局。 
 
                        </p> 
                        <div class="text-right"> 
                            <small>来自 <cite title="《娱乐周刊》">《娱乐周刊》</cite></small> 
                        </div> 
 
                        <p class="text-warning"> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>汤姆</strong>从头到尾不知情,其实整个赌金根本就是个大骗局。于是汤姆不但输光所有的钱,还倒欠赌场主人五十万英镑。汤姆在一个星期内不能还清,他和他朋友们的手指和他老爸的酒吧都将不保。汤姆一伙想尽各种可能的凑钱办法,最后决定抢劫隔壁的毒犯。 
                        </p> 
 
                        <p class="text-error"> 
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;而隔壁的毒犯同时也正计划抢劫他们的毒品供应商。汤姆一伙的计划听起来简单,但执行时却状况百出。突发的状况让这伙人不由得越陷越深。事情变得十分复杂,场面变得十分混乱。几个小混混发现整个事件已经发展到超出他们的想象,于是极力想逃脱,但是已经…… 
                        </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>&lt;section&gt;</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>&lt;caption&gt;</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>

评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

jQuery选择器