← Bootstrap 4 背景颜色 Bootstrap4 图像效果 →

Bootstrap 4 表格

Bootstrap 重制了表格 ( table ) 的样式

基础表格

.table 类可以设置基础表格的样式

<table class="table">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

条纹表格

添加 .table-striped CSS 类，表格就会有条纹效果

<table class="table table-striped">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

带边框表格

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

<table class="table table-bordered">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

表格鼠标悬停效果 (灰色背景)

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

<table class="table table-hover">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

表格黑色背景

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

<table class="table table-dark">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

黑色条纹表格

同时添加 .table-dark 和 .table-striped CSS 类可以创建黑色的条纹表格

<table class="table table-dark table-striped">
    <thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

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

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

<table class="table table-dark table-hover">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

指定意义的颜色类

可以给 <tr> 或 <td> 添加 table-* 为每一行或每个单元格设置颜色

<table class="table">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>      
      <tr class="table-primary">
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr class="table-success">
        <td>王</td>
        <td>安石</td>
        <td>北宋</td>
      </tr>
      <tr class="table-danger">
        <td>欧阳</td>
        <td>修</td>
        <td>北宋</td>
      </tr>
      <tr class="table-info">
        <td>司马</td>
        <td>迁</td>
        <td>西汉</td>
      </tr>
      <tr class="table-warning">
        <td>杨</td>
        <td>修</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-active">
        <td>曹</td>
        <td>操</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-secondary">
        <td>曹</td>
        <td>植</td>
        <td>曹魏</td>
      </tr>
      <tr class="table-light">
        <td>施</td>
        <td>耐庵</td>
        <td>元</td>
      </tr>
      <tr class="table-dark text-dark">
        <td>苏</td>
        <td>轼</td>
        <td>北宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

可用于设置颜色的 CSS 类

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

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

表头颜色

.thead-dark CSS 类用于给表头添加黑色背景

.thead-light CSS 类用于给表头添加灰色背景

<table class="table">
    <thead class="thead-dark">
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <thead class="thead-light">
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

紧凑的表格

.table-sm CSS 类用于通过减少内边距来设置紧凑的表格

<table class="table table-bordered table-sm">
<thead>
      <tr>
        <th>姓</th>
        <th>名</th>
        <th>朝代</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>李</td>
        <td>白</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>韩</td>
        <td>愈</td>
        <td>唐</td>
      </tr>
      <tr>
        <td>王</td>
        <td>安石</td>
        <td>宋</td>
      </tr>
    </tbody>
</table>

运行范例 »

响应式表格

.table-responsive CSS 类用于创建响应式表格

响应式表格的规则如下

在屏幕宽度小于 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

<div class="table-responsive-sm">
<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>

运行范例 »

← Bootstrap 4 背景颜色 Bootstrap4 图像效果 →

Bootstrap 4 基础教程

♥ 简单教程，简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.