技术无忧-Bootstrap4 教程-Bootstrap4 表格

Bootstrap4 教程

Bootstrap4 教程简介 Bootstrap4 安装使用 Bootstrap4 网格系统 Bootstrap4 文字排版 Bootstrap4 颜色 Bootstrap4 表格 Bootstrap4 图形形状 Bootstrap4 Jumbotron Bootstrap4 信息提示框 Bootstrap4 按钮 Bootstrap4 按钮组 Bootstrap4 徽章 Bootstrap4 进度条 Bootstrap4 分页 Bootstrap4 列表组 Bootstrap4 卡片 Bootstrap4 下拉菜单 Bootstrap4 折叠 Bootstrap4 导航 Bootstrap4 导航栏 Bootstrap4 面包屑导航 Bootstrap4 表单 Bootstrap4 表单控件 Bootstrap4 输入框组 Bootstrap4 自定义表单 Bootstrap4 轮播 Bootstrap4 模态框 Bootstrap4 提示框 Bootstrap4 弹出框 Bootstrap4 滚动监听 Bootstrap4 小工具 Bootstrap4 Flex布局 Bootstrap4 多媒体对象

Bootstrap4 表格

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

<table class="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

条纹表格

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

<table class="table table-striped">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

带边框表格

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

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

鼠标悬停状态表格

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

<table class="table table-hover">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

黑色背景表格

.table-dark 类可以为表格添加黑色背景：

<table class="table table-dark">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

黑色条纹表格

联合使用 .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>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

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

联合使用 .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>One</td>
            <td>Oner</td>
            <td>one@email.com</td>
        </tr>
        <tr>
            <td>Two</td>
            <td>Twoer</td>
            <td>two@email.com</td>
        </tr>
        <tr>
            <td>Three</td>
            <td>Threer</td>
            <td>three@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

指定意义的颜色类

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

 <table class="table">
    <thead>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <td>Primary</td>
            <td>Primaryer</td>
            <td>Primary@email.com</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Successer</td>
            <td>Success@email.com</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Danger</td>
            <td>Danger@email.com</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Infoer</td>
            <td>Info@email.com</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Warninger</td>
            <td>Warning@email.com</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activer</td>
            <td>Active@email.com</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondaryer</td>
            <td>Secondary@email.com</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Lighter</td>
            <td>Light@email.com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Darker</td>
            <td>Dark@email.com</td>
        </tr>
    </tbody>
</table>

效果：

Firstname	Lastname	Email
Primary	Primaryer	Primary@email.com
Success	Successer	Success@email.com
Danger	Danger	Danger@email.com
Info	Infoer	Info@email.com
Warning	Warninger	Warning@email.com
Active	Activer	Active@email.com
Secondary	Secondaryer	Secondary@email.com
Light	Lighter	Light@email.com
Dark	Darker	Dark@email.com

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

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

表头颜色

在 Bootstrap v4.0.0-beta.2 中 .thead-dark 类用于给表头添加黑色背景，.thead-light 类用于给表头添加灰色背景：

在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。

效果：

表头颜色

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

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

较小的表格

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

效果：

较小的表格

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

Firstname	Lastname	Email
One	Oner	one@email.com
Two	Twoer	two@email.com
Three	Threer	three@email.com

响应式表格

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

效果：

响应式表格

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

#	Firstname	Lastname	Age	City	Country	Sex	Example	Example	Example	Example
1	Nana	Lee	18	Shanghai	China	Female	Yes	Yes	Yes	Yes

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

效果：

响应式表格

.table-responsive-xl 类用于创建响应式表格，在屏幕宽度小于 1200px 时显示水平滚动条。

重置浏览器大小查看效果。

#	Firstname	Lastname	Age	City	Country	Sex	Example	Example	Example	Example
1	Nana	Lee	18	Shanghai	China	Female	Yes	Yes	Yes	Yes

发表评论