Bootstrap4 表格 - 代码天地

Bootstrap4 表格

其他 2019-12-31 18:50:54 阅读次数: 0

一、Bootstrap4 基础表格

Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下:

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

二、条纹表格

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

<table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

三、带边框表格

.table-bordered 类可以为表格添加边框

<table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

四、鼠标悬停状态表格

.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：

<table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

五、黑色背景表格

<table class="table table-dark">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

六、黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

七、鼠标悬停效果 - 黑色背景表格

联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：

<table class="table table-dark table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

八、指定意义的颜色类

通过指定意义的颜色类可以为表格的行或者单元格设置颜色：

<table class="table">
    <thead>
      <tr>
        <th>Firstname</th><th>Lastname</th><th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Default</td><td>Defaultson</td><td>[email protected]</td>
      </tr>      
      <tr class="table-primary">

        <td>Primary</td><td>Joe</td><td>[email protected]</td>
      </tr>
      <tr class="table-success">
        <td>Success</td><td>Doe</td><td>[email protected]</td>
      </tr>
      <tr class="table-danger">
        <td>Danger</td><td>Moe</td><td>[email protected]</td>
      </tr>
      <tr class="table-info">
        <td>Info</td><td>Dooley</td><td>[email protected]</td>
      </tr>
      <tr class="table-warning">
        <td>Warning</td><td>Refs</td><td>[email protected]</td>
      </tr>
      <tr class="table-active">
        <td>Active</td><td>Activeson</td><td>[email protected]</td>
      </tr>
      <tr class="table-secondary">
        <td>Secondary</td><td>Secondson</td><td>[email protected]</td>
      </tr>
      <tr class="table-light">
        <td>Light</td><td>Angie</td><td>[email protected]</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>Dark</td><td>Bo</td><td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

下表列出了表格颜色类的说明:

.table-primary：蓝色: 指定这是一个重要的操作
.table-success：绿色: 指定这是一个允许执行的操作
.table-danger：红色: 指定这是可以危险的操作
.table-info:浅蓝色: 表示内容已变更
.table-warning:橘色: 表示需要注意的操作
.table-active:灰色: 用于鼠标悬停效果
.table-secondary:灰色: 表示内容不怎么重要
.table-light:浅灰色，可以是表格行的背景
.table-dark:深灰色，可以是表格行的背景

九、表头颜色

.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景:

<table class="table">
    <thead class="thead-dark">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
  </table>
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

十、较小的表格

.table-sm 类用于通过减少内边距来设置较小的表格:

<table class="table table-bordered table-sm">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>[email protected]</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>[email protected]</td>
      </tr>
    </tbody>
</table>

尝试一下 »

十一、响应式表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:

<div class="table-responsive">
<table class="table">
    <thead>
      <tr>
        <th>#</th>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Age</th>
        <th>City</th>
        <th>Country</th>
        <th>Sex</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
        <th>Example</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Anna</td>
        <td>Pitt</td>
        <td>35</td>
        <td>New York</td>
        <td>USA</td>
        <td>Female</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
      </tr>
    </tbody>
</table>
</div>

尝试一下 »

你可以通过以下类设定在指定屏幕宽度下显示滚动条：

.table-responsive-sm:
< 576px
.table-responsive-md:
< 768px
.table-responsive-lg:
< 992px
.table-responsive-xl:
< 1200px

尝试一下 »

猜你喜欢

转载自www.cnblogs.com/springsnow/p/12126346.html

Bootstrap4 表格

bootstrap4|颜色|表格

表格 - bootStrap4常用CSS笔记

Bootstrap4用法

Bootstrap4 轮播

bootstrap4

Bootstrap4入门

Bootstrap4 颜色

Bootstrap4 导航

Bootstrap4 卡片

BootStrap4：组件

一、bootstrap4基础（布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类）

Bootstrap4多级菜单

bootstrap4 网格系统

Bootstrap4的重要更新

Bootstrap4 模态框

Bootstrap4 表单控件

Bootstrap4使用教程

Bootstrap4类样式

Bootstrap4 入门学习

Bootstrap4 表单处理

Bootstrap4 正式发布

Bootstrap4 徽章（Badges）

Bootstrap4 按钮组

Bootstrap4：安装使用

Bootstrap4 图像形状

Bootstrap4 列表组

bootstrap4 基本配置

Bootstrap4的栅格布局

bootstrap4 nav 菜单

今日推荐

《美国对全球网络空间安全与发展的威胁和破坏》报告发布

火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？

北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”

LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍

周排行

循环神经网络（rnn）讲解

Tigao教程四：单独的关节运动

金蝶K3WISE15.0-注册套打教程

如何在Mac上配置Kubernetes

Android应用结束自身进程的方法

SpringMVC学习十三拦截器栈

中国驻洛杉矶总领馆举行新春招待会

HttpClient get post 发送

11 - three.js 笔记 - 绘制三维字体模型

Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点

每日归档

更多

2024-05-01(4)

2024-04-30(1)

2024-04-29(40)

2024-04-28(0)

2024-04-27(56)

2024-04-26(39)

2024-04-25(22)

2024-04-24(36)

2024-04-23(26)

2024-04-22(39)