• 技术文章 >web前端 >前端问答

    bootstrap有哪些表格类

    青灯夜游青灯夜游2022-01-10 12:06:54原创52

    bootstrap的表格类有:1、“.table”,基础表格;2、“.table-striped”,斑马线表格;3、“.table-bordered”,带边框的表格;4、“ .table-hover”,鼠标悬停高亮的表格等等。

    本教程操作环境:Windows7系统、bootsrap3.3.7版、DELL G3电脑

    Bootstrap 表格

    Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:

    标签描述
    <table>为表格添加基础样式。
    <thead>表格标题行的容器元素(<tr>),用来标识表格列。
    <tbody>表格主体中的表格行的容器元素(<tr>)。
    <tr>一组出现在单行上的表格单元格的容器元素(<td> 或 <th>)。
    <td>默认的表格单元格。
    <th>特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在 <thead> 内使用。
    <caption>关于表格存储内容的描述或总结。

    Bootstrap为表格不同的样式风格提供了不同的类名,主要包括:

    描述
    .table为任意 <table> 添加基本样式 (只有横向分隔线)
    .table-striped在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持)
    .table-bordered为所有表格的单元格添加边框
    .table-hover在 <tbody> 内的任一行启用鼠标悬停状态
    .table-condensed紧凑表格
    .table-responsive响应式表格
    .table-bordered带边框的表格

    基本的表格

    如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:

    实例

    <!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8"> 
    	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <table class="table">
    	<caption>基本的表格布局</caption>
       <thead>
          <tr>
             <th>名称</th>
             <th>城市</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>Tanmay</td>
             <td>Bangalore</td>
          </tr>
          <tr>
             <td>Sachin</td>
             <td>Mumbai</td>
          </tr>
       </tbody>
    </table>
    
    </body>
    </html>

    结果如下所示:

    1.jpg

    可选的表格类

    除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

    条纹表格

    通过添加 .table-striped class,您将在 <tbody> 内的行上看到条纹,如下面的实例所示:

    实例

    <table class="table table-striped">
      <caption>条纹表格布局</caption>
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>邮编</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>400003</td>
        </tr>
        <tr>
          <td>Uma</td>
          <td>Pune</td>
          <td>411027</td>
        </tr>
      </tbody></table>

    结果如下所示:

    2.jpg

    边框表格

    通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:

    实例

    <table class="table table-bordered">
      <caption>边框表格布局</caption>
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>邮编</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>400003</td>
        </tr>
        <tr>
          <td>Uma</td>
          <td>Pune</td>
          <td>411027</td>
        </tr>
      </tbody></table>

    结果如下所示:

    3.jpg

    悬停表格

    通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:

    实例

    <table class="table table-hover">
      <caption>悬停表格布局</caption>
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>邮编</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td>
        </tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>400003</td>
        </tr>
        <tr>
          <td>Uma</td>
          <td>Pune</td>
          <td>411027</td>
        </tr>
      </tbody></table>

    结果如下所示:

    4.jpg

    精简表格

    通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。

    实例

    <table class="table table-condensed">
      <caption>精简表格布局</caption>
      <thead>
        <tr>
          <th>名称</th>
          <th>城市</th>
          <th>邮编</th></tr>
      </thead>
      <tbody>
        <tr>
          <td>Tanmay</td>
          <td>Bangalore</td>
          <td>560001</td></tr>
        <tr>
          <td>Sachin</td>
          <td>Mumbai</td>
          <td>400003</td></tr>
        <tr>
          <td>Uma</td>
          <td>Pune</td>
          <td>411027</td></tr>
      </tbody></table>

    结果如下所示:

    5.jpg

    上下文类

    下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。

    描述
    .active对某一特定的行或单元格应用悬停颜色
    .success表示一个成功的或积极的动作
    .warning表示一个需要注意的警告
    .danger表示一个危险的或潜在的负面动作

    这些类可被应用到 <tr>、<td> 或 <th>。

    实例

    <table class="table">
      <caption>上下文表格布局</caption>
      <thead>
        <tr>
          <th>产品</th>
          <th>付款日期</th>
          <th>状态</th></tr>
      </thead>
      <tbody>
        <tr class="active">
          <td>产品1</td>
          <td>23/11/2013</td>
          <td>待发货</td></tr>
        <tr class="success">
          <td>产品2</td>
          <td>10/11/2013</td>
          <td>发货中</td></tr>
        <tr class="warning">
          <td>产品3</td>
          <td>20/10/2013</td>
          <td>待确认</td></tr>
        <tr class="danger">
          <td>产品4</td>
          <td>20/10/2013</td>
          <td>已退货</td></tr>
      </tbody></table>

    结果如下所示:

    6.jpg

    响应式表格

    通过把任意的 .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>
          <tr>
            <td>产品4</td>
            <td>20/10/2013</td>
            <td>已退货</td></tr>
        </tbody>
      </table></div>

    结果如下所示:

    7.jpg

    【相关推荐:《bootstrap教程》】

    以上就是bootstrap有哪些表格类的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:bootstrap 表格类
    上一篇:javascript中的不等于怎么表示 下一篇:bootstrap媒体查询有什么作用

    相关文章推荐

    • bootstrap 怎么设置背景• bootstrap属于前端框架吗• bootstrap4的栅格分成几类• bootstrap自带的隐藏类有哪些• bootstrap有几个网格

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网