Bootstrap表格

来源：互联网发布：js获取当前url参数编辑：程序博客网时间：2024/06/05 14:30

表格类
（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>

0 0