• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
Prev

Bootstrap4 表格

Data: 2020-05-11 02:16:25Form: JournalClick: 9

# 表格

# 一、用法

<table class="table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>电话</th>
            <th>省份</th>
            <th>城市</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>1</th>
            <td>天蓬</td>
            <td>tianpeng@php.cn</td>
            <td>13854381111</td>
            <td>安徽</td>
            <td>合肥</td>
            <td>40</td>
        </tr>
        <tr>
            <th>2</th>
            <td>欧阳克</td>
            <td>ouyangke@php.cn</td>
            <td>13854382222</td>
            <td>安徽</td>
            <td>马鞍山</td>
            <td>40</td>
        </tr>
        <tr>
            <th>3</th>
            <td>灭绝师太</td>
            <td>miejue@php.cn</td>
            <td>13854383333</td>
            <td>安徽</td>
            <td>滁州</td>
            <td>18</td>
        </tr>
        <tr>
            <th>4</th>
            <td>裘千丈</td>
            <td>qiuqianzhang@php.cn</td>
            <td>13854384444</td>
            <td>安徽</td>
            <td>蚌埠</td>
            <td>40</td>
        </tr>
        <tr>
            <th>5</th>
            <td>钟老师</td>
            <td>zhonglaoshi@php.cn</td>
            <td>13854385555</td>
            <td>安徽</td>
            <td>淮南</td>
            <td>30</td>
        </tr>
        <tr>
            <th>6</th>
            <td>小编1</td>
            <td>xiaobian1@php.cn</td>
            <td>13854386661</td>
            <td>安徽</td>
            <td>安庆</td>
            <td>18</td>
        </tr>
        <tr>
            <th>7</th>
            <td>小编2</td>
            <td>xiaobian2@php.cn</td>
            <td>13854386662</td>
            <td>安徽</td>
            <td>亳州</td>
            <td>18</td>
        </tr>
        <tr>
            <th>8</th>
            <td>小编3</td>
            <td>xiaobian3@php.cn</td>
            <td>13854386663</td>
            <td>安徽</td>
            <td>淮北</td>
            <td>18</td>
        </tr>
        <tr>
            <th>9</th>
            <td>小编4</td>
            <td>xiaobian4@php.cn</td>
            <td>13854386664</td>
            <td>安徽</td>
            <td>阜阳</td>
            <td>18</td>
        </tr>
        <tr>
        <th>10</th>
            <td>小编5</td>
            <td>xiaobian5@php.cn</td>
            <td>13854386665</td>
            <td>安徽</td>
            <td>六安</td>
            <td>18</td>
        </tr>
    </tbody>
</table>

# 1、表格样式

  • clsss="table" 表格
<table class="table"></table>
  • clsss="table-dark" 深色背景
<table class="table table-dark"></table>
  • table-striped 斑马条纹
<table class="table table-striped"></table>
<table class="table table-dark table-striped"></table>
  • table-bordered 边框
<table class="table table-bordered"></table>
<table class="table table-dark table-bordered"></table>
  • table-hover 鼠标悬停状态
<table class="table table-hover"></table>
<table class="table table-dark table-hover"></table>

# 2、表头样式

  • thead-dark 深灰色
  • thead-light 浅灰色
<thead class="thead-dark">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>省份</th>
        <th>城市</th>
        <th>年龄</th>
    </tr>
</thead>
<thead class="thead-light">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>邮箱</th>
        <th>电话</th>
        <th>省份</th>
        <th>城市</th>
        <th>年龄</th>
    </tr>
</thead>

# 3、表行样式

参数描述
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景
<table class="table">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>邮箱</th>
            <th>电话</th>
            <th>省份</th>
            <th>城市</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-primary">
            <th>1</th>
            <td>天蓬</td>
            <td>tianpeng@php.cn</td>
            <td>13854381111</td>
            <td>安徽</td>
            <td>合肥</td>
            <td>40</td>
        </tr>
        <tr class="table-success">
            <th>2</th>
            <td>欧阳克</td>
            <td>ouyangke@php.cn</td>
            <td>13854382222</td>
            <td>安徽</td>
            <td>马鞍山</td>
            <td>40</td>
        </tr>
        <tr class="table-danger">
            <th>3</th>
            <td>灭绝师太</td>
            <td>miejue@php.cn</td>
            <td>13854383333</td>
            <td>安徽</td>
            <td>滁州</td>
            <td>18</td>
        </tr>
        <tr class="table-info">
            <th>4</th>
            <td>裘千丈</td>
            <td>qiuqianzhang@php.cn</td>
            <td>13854384444</td>
            <td>安徽</td>
            <td>蚌埠</td>
            <td>40</td>
        </tr>
        <tr class="table-warning">
            <th>5</th>
            <td>钟老师</td>
            <td>zhonglaoshi@php.cn</td>
            <td>13854385555</td>
            <td>安徽</td>
            <td>淮南</td>
            <td>30</td>
        </tr>
        <tr class="table-active">
            <th>6</th>
            <td>小编1</td>
            <td>xiaobian1@php.cn</td>
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>