Bootstrap表格

表格类
(1).table:为任意 <table> 添加基本样式 (只有横向分隔线)
(2).table-striped:在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
(3).table-bordered:为所有表格的单元格添加边框
(4).table-hover:在 <tbody> 内的任一行启用鼠标悬停状态
(5).table-condensed:行内边距(padding)被切为两半,让表格更加紧凑

<div class="container">
    <h2>表格</h2>
    <p>联合使用所有表格类</p>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>First name</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>B</td>
            </tr>
            <tr>
                <td>3</td>
                <td>C</td>
            </tr>
        </tbody>
    </table>

</div>


tr,th,td类
(1).active :将悬停的颜色应用在行或者单元格上
(2).success:表示成功的操作
(3).info:表示信息变化的操作
(4).warning:表示一个警告的操作
(5).danger:表示一个危险的操作

<div class="container">
    <h2>表格</h2>

    <table class="table table-striped table-bordered table-hover table-condensed">
        <thead>
            <tr>
                <th>#</th>
                <th>tr,th,td类</th>
            </tr>
        </thead>

        <tbody>
            <tr class="avtive">
                <td>.active</td>
                <td>将悬停的颜色应用在行或单元格上</td>
            </tr>
            <tr class="success">
                <td>.success</td>
                <td>表示成功的操作</td>
            </tr>
            <tr class="info">
                <td>.info</td>
                <td>表示信息变化的操作</td>
            </tr>
            <tr class="warning">
                <td>.warning</td>
                <td>表示一个警告的操作</td>
            </tr>
            <tr class="danger">
                <td>.danger</td>
                <td>表示一个危险的操作</td>
            </tr>
        </tbody>
    </table>
</div>


响应式表格
把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。

<div class="table-responsive">
    <table class="table">
        <caption>响应式表格布局</caption>
        <thead>
          <tr>
            <th>产品</th>
            <th>付款日期</th>
            <th>状态</th></tr>
        </thead>
        <tbody>
            <tr>
                <td>产品1</td>
                <td>23/11/2013</td>
                <td>待发货</td>
            </tr>
            <tr>
                <td>产品2</td>
                <td>10/11/2013</td>
                <td>发货中</td></tr>
            <tr>
                <td>产品3</td>
                <td>20/10/2013</td>
                <td>待确认</td>
            </tr>
        </tbody>
     </table>
</div>
IT文库 » Bootstrap表格
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址