帝王谷资源网 Design By www.wdxyy.com

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

JS组件Bootstrap Table布局详解

表格类
下表样式可用于表格中:

JS组件Bootstrap Table布局详解

<tr>, <th> 和 <td> 类
下表的类可用于表格的行或者单元格:

JS组件Bootstrap Table布局详解

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

<div class="row">
      <table class="table">
        <caption class="text-center">基本表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
        </tbody>
      </table>
</div>

显示效果:

JS组件Bootstrap Table布局详解

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

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

<div class="row">
      <table class="table table-striped">
        <caption class="text-center">条纹表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
    </div>

显示效果:

JS组件Bootstrap Table布局详解

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

<div class="row">
      <table class="table table-bordered">
        <caption class="text-center">边框表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
 </div>

显示效果:

JS组件Bootstrap Table布局详解

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

<div class="row">
      <table class="table table-hover">
        <caption class="text-center">悬停表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
</div>

显示效果:

JS组件Bootstrap Table布局详解

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

<div class="row">
      <table class="table table-condensed">
        <caption class="text-center">精简表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr>
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr>
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr>
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
</div>

显示效果:

JS组件Bootstrap Table布局详解

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

JS组件Bootstrap Table布局详解

这些类可以用到<tr>、<td>、<th>中,如下面实例所示:

<div class="row">
      <table class="table">
        <caption class="text-center">上下文表格布局</caption>
        <thead>
          <tr>
            <th>编号</th>
            <th>城市</th>
          </tr>
        </thead>
        <tbody>
          <tr class="active">
            <td>No.1</td>
            <td>北京</td>
          </tr>
          <tr class="success">
            <td>No.2</td>
            <td>上海</td>
          </tr>
          <tr class="warning">
            <td>No.3</td>
            <td>苏州</td>
          </tr>
          <tr class="danger">
            <td>No.4</td>
            <td>南京</td>
          </tr>
        </tbody>
      </table>
    </div>

显示效果:

JS组件Bootstrap Table布局详解

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

 <div class="table-responsive">
    <table class="table">
      <caption class="text-center">响应式表格布局</caption>
      <thead>
        <tr>
          <th>编号</th>
          <th>城市</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>No.1</td>
          <td>北京</td>
        </tr>
        <tr>
          <td>No.2</td>
          <td>上海</td>
        </tr>
        <tr>
          <td>No.3</td>
          <td>苏州</td>
        </tr>
        <tr>
          <td>No.4</td>
          <td>南京</td>
        </tr>
      </tbody>
    </table>
  </div>

显示效果:

JS组件Bootstrap Table布局详解

如果还想继续学习的话大家可以点击这里进行学习,再为大家附一个精彩的专题:Bootstrap学习教程

以上就是本文的全部内容,希望能够帮助大家更好的学习JS表格组件神器bootstrap table。

标签:
JS,bootstrap,table

帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。