页面列表表格样式

页面内容结构已写到母版里，写代码时，只需要关心portlet的内容。

<div class="portlet">
    <div class="portlet-title">
       //此处为内容1，头部
    </div>
     <div class="portlet-body">
       //此处为内容2，查询条件
       //此处为内容3，表格列表
    </div>
</div>

　　

以报名点为列：

 

1）头部：

<div class="caption">
    <i class="icon-pointer"></i>报名点列表
</div>
<div class="actions">
    <a href="javascript:;" class="btn blue">
        新增&nbsp;&nbsp;<i class="fa fa-plus"></i>
    </a>
    <a href="javascript:;" class="btn purple">
        导出&nbsp;&nbsp;<i class="fa fa-file-excel-o"></i>
    </a>
</div>

 

2）查询条件：

<div class="row form-inline">
    <div class="col-md-12 text-right">
        <div class="form-group">
            <input type="text" class="form-control input-sm" id="" style="width:250px;" placeholder="请输入报名点名称">
        </div>
        <div class="form-group">
            <button type="button" class="btn yellow-crusta btn-sm">
               查询&nbsp;&nbsp;<i class="fa fa-search"></i>
            </button>
        </div>
     </div>
</div>

　

form-inline的目的是查询条件里有很多表单，需要单行排列。

每个表单写到form-group里。
由于此案例查询条件少，需要右对齐，所以加了个：text-right

 

说明：如果查询条件有多行，比如：

此时应该：

每行的查询条件后，加下margin-bottom，最后一行的查询条件不用加。

 

3）表格列表：

<div class="table-scrollable">
    <table class="table table-striped table-bordered table-advance table-condensed table-hover">
        <thead>
            <tr>														
                <th>#</th>														
                <th> 名称 </th>														
                <th> 电话 </th>																											
                <th> 操作 </th>
            </tr>
        </thead>
        <tbody>
            <tr>														
                <td>1</td>														
                <td>总部</td>														
                <td>0551-53514232 </td>
                <td>															
                    <a class="btn btn-success btn-xs" href="#">编辑</a>															
                    <a class="btn btn-danger btn-xs">删除</a>															
                    <a class="btn grey-mint btn-xs">打印</a>														
                </td>
            </tr>
        </tbody>
    </table>
</div>			

table-striped：间隔行会有背景

table-bordered：表格加边框

table-advance：表头(标题行)有个背景

table-condensed：表格压缩

table-hover：鼠标放到行上有背景色