Bootstrap CSS 3 笔记

<!-- 面包屑导航        HOME / LIBRARY / DATA -->
<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

<!-- 选项卡导航 -->
<ul class="nav nav-tabs">
    <li class="active"><a href="{url ‘platform/special/display‘}">活动</a></li>
    <li class="disabled"><a href="#">禁用</a></li>
    <li><a href="#">默认</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
            下拉菜单 <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
            <li>linkA</li>
            <li class="divider"></li>
            <li>linkB</li>
        </ul>
    </li>
</ul>

<!-- input-group -->
<div class="input-group">
    <span class="input-group-addon">$</span>
    <input type="text" class="form-control">
    <span class="input-group-addon">.00</span>
</div>

<!-- input-group-button -->
<div class="input-group">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">left Go!</button>
    </span>
    <input type="text" class="form-control">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button">right Go!</button>
    </span>
</div>

<!-- panel -->
<div class="panel panel-default">
    <div class="panel-heading">    head    </div>
    <div class="panel-body">    body    </div>
    <table class="table">
        <tbody>
            <tr>
                <td></td>
            </tr>
        </tbody>
    </table>
    <ul class="list-group">
        <li class="list-group-item">列表组1</li>
        <li class="list-group-item"><span class="badge">14</span>列表组2</li>
        <li class="list-group-item">Morbi leo risus</li>
        <li class="list-group-item">Porta ac consectetur ac</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="panel-footer">    footer    </div>
</div>

<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

<!-- 分页 -->
<ul class="pagination">
    <li class="disabled"><a href="#">&laquo;</a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></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="#">&raquo;</a></li>
</ul>

<!-- 标签 -->
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

<!-- 徽章 ,没有内容会自动隐藏-->
<a href="#">Inbox <span class="badge">42</span></a>
<a href="#">Inbox <span class="badge pull-right">42</span></a>

<!-- 警告 -->
<div class="alert alert-success">...</div>
<div class="alert alert-info">
    <a href="#" class="alert-link">警告框里面的链接</a>
</div>
<div class="alert alert-warning">...</div>
<div class="alert alert-danger">...</div>

<!-- 可关闭警告框 -->
<div class="alert alert-warning alert-dismissable">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <strong>Warning!</strong> Best check yo self, you‘re not looking too good.
</div>

<!-- well -->
<div class="well well-lg">...</div>
<div class="well"></div>
<div class="well well-sm">...</div>

<!-- 有符号的按钮 -->
<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

<!-- 按钮组 -->
<div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
    <button type="button" class="btn btn-default">Middle</button>
    <button type="button" class="btn btn-default">Right</button>
</div>

<div class="clearfix">

    <form action="" method="get" class="form-horizontal" role="form">
        <input type="hidden" name="c" value="user">
        <input type="hidden" name="a" value="display">
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">状态</label>
            <div class="col-sm-8">
                <select name="status" class="form-control">
                    <option value="">全部</option>
                    <option value="0">启用</option>
                    <option value="-1">禁用</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">用户名</label>
            <div class="col-sm-8">
                <input class="form-control" name="username" id="" type="text" value="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">用户组</label>
            <div class="col-sm-8">
                <select name="group" class="form-control">
                    <option value="">全部</option>
                    <option value="1">测试用户组</option>
                    <option value="4">金牌代理商</option>
                    <option value="5">一级代理商</option>
                    <option value="6">工作人员</option>
                </select>
            </div>
            <div class="pull-right col-xs-12 col-sm-2 col-lg-1">
                <button class="btn btn-block"><i class="fa fa-search"></i> 搜索</button>
            </div>
        </div>
        <div class="form-group">
        </div>
    </form>

    <!-- 提交 -->
    <form action="" method="post" class="form-horizontal" role="form">
        <h4 class="page-header">系统回复</h4>
        <input type="hidden" name="id" value="{$rule[‘rule‘][id]}">
        <div class="form-group" style="margin-bottom: 5px;">
            <label for="" class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">关联关键字：</label>
            <div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
                <input type="text" name="" id="" class="form-control" placeholder="" />
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-md-offset-2 col-lg-offset-1 col-xs-12 col-sm-10 col-md-10 col-lg-11">
                <input name="submit" type="submit" value="提交" class="btn btn-primary span3" />
                <input type="hidden" name="token" value="{$_W[‘token‘]}" />
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"></label>
            <div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
                <div class="input-group">
                    <input type="text" name="" id="" class="form-control" value="" />
                    <span class="input-group-addon">秒</span>
                </div>
                <span class="help-block"></span>
            </div>
        </div>
        <div class="form-group">
            <label for="" class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label"> 嵌套 form-group </label>
            <div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
                <div class="row" style="padding: 15px 15px 0;">
                    <div class="form-group" style="margin-bottom: 5px;">
                        <label for="welcomekeyword" class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">关联关键字：</label>
                        <div class="col-xs-12 col-sm-10 col-md-10 col-lg-11">
                            <input type="text" id="welcomekeyword" name="welcomekeyword" class="form-control" placeholder="" autocomplete="off" />
                        </div>
                    </div>
                </div>
                <div class="help-block"></div>
            </div>
        </div>
    </form>

    <!-- 搜索 -->
    <form action="./index.php" method="get" class="form-horizontal" role="form">
        <input type="hidden" name="c" value="">
        <input type="hidden" name="a" value="">
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">状态</label>
            <div class="col-sm-8 col-xs-12 col-md-8 col-lg-10">
                <select name="status" class="form-control">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-12 col-sm-2 col-md-2 col-lg-1 control-label">关键字</label>
            <div class="col-sm-8 col-xs-12 col-md-8 col-lg-10">
                <input class="form-control" name="keyword" id="" type="text" value="">
            </div>
            <div class="pull-right col-xs-12 col-sm-2 col-md-2 col-lg-1">
                <button class="btn btn-block"><i class="fa fa-search"></i> 搜索</button>
            </div>
        </div>
    </form>
</div>

Bootstrap CSS 3 笔记