BootStrap4内容系列之表格

最新推荐文章于 2023-04-12 15:30:27 发布
最新推荐文章于 2023-04-12 15:30:27 发布
阅读量432 收藏
点赞数
分类专栏： BootStrap4 文章标签： bootstrap4 表格 table 内容系列
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103355579
版权

目录

官方文档地址

https://getbootstrap.com/docs/4.4/content/tables/

其他中文文档地址

表格基本样式

.table
不了解scope含义的小伙伴，可前往https://www.runoob.com/tags/tag-th.html了解一下。

<!-- 表格基本样式 -->
<div class="container">
    <h1>表格基本样式</h1>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

带边框表格

.table-bordered

<!-- 带边框表格 -->
<div class="container">
    <h1>带边框的表格</h1>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

无边框表格

.table-borderless

<!-- 无边框表格 -->
<div class="container">
    <h1>无边框表格</h1>
    <table class="table table-borderless">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

条纹状表格

.table-striped

<!-- 条纹表格 -->
<div class="container">
    <h1>条纹表格</h1>
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

鼠标悬停状态表格

.table-hover

<!-- 鼠标悬停状态表格 -->
<div class="container">
    <h1>鼠标悬停状态表格</h1>
    <table class="table table-hover">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

较小的表格

.table-sm

<!-- 较小的表格 -->
<div class="container">
    <h1>较小的表格</h1>
    <table class="table table-sm">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

响应式表格

总是响应

.table-responsive

<!-- 总是响应 -->
<div class="container">
    <h1>总是响应</h1>
    <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>
</div>

多屏幕断点响应

  • .table-responsive-[breakpoint]
    • .table-responsive-sm
    • .table-responsive-md
    • .table-responsive-lg
    • .table-responsive-xl
<!-- 多屏幕断点响应 -->
<div class="container">
    <h1>响应式表格</h1>
    <p>.table-responsive-md 类用于创建响应式表格，在屏幕宽度小于 768px 时显示水平滚动条。</p>
    <p>重置浏览器大小查看效果。</p>
    <div class="table-responsive-md">
        <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>
</div>

caption表格标题

<caption></caption>
表格标题，在bs4中默认显示在底部，如果想显示在顶部，通过caption-side样式规则。

<!-- caption表格标题 -->
<div class="container">
    <h1>表格标题，默认显示在底部，如果想显示在顶部，通过caption-side样式规则</h1>
    <table class="table">
        <caption>显示在底部</caption>
        <!--        <caption style="caption-side: top; text-align: center;">显示在顶部</caption>-->
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

表头颜色

.thead-dark
.thead-light

<!-- 表头颜色 -->
<div class="container">
    <h1>表头颜色</h1>
    <table class="table">
        <caption style="caption-side: top;">thead-dark</caption>
        <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>

    <table class="table">
        <caption style="caption-side: top;">thead-light</caption>
        <thead class="thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

黑色背景表格

.table-dark

<!-- 黑色背景表格 -->
<div class="container">
    <h1>黑色背景表格</h1>
    <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>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>
</div>

为行或者单元格指定情境色

类名描述
.table-primary蓝色: 指定这是一个重要的操作
.table-success绿色: 指定这是一个允许执行的操作
.table-danger红色: 指定这是可以危险的操作
.table-info浅蓝色: 表示内容已变更
.table-warning橘色: 表示需要注意的操作
.table-active灰色: 用于鼠标悬停效果
.table-secondary灰色: 表示内容不怎么重要
.table-light浅灰色，可以是表格行的背景
.table-dark深灰色，可以是表格行的背景
<!-- 为行或者单元格指定情境色 -->
<div class="container">
    <h1>行 or 单元格的情境色</h1>
    <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>def@somemail.com</td>
        </tr>
        <tr class="table-primary">
            <td>Primary</td>
            <td>Joe</td>
            <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Refs</td>
            <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activeson</td>
            <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondson</td>
            <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Angie</td>
            <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Bo</td>
            <td>bo@example.com</td>
        </tr>
        </tbody>
    </table>
</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>09表格</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<pre class="pre-scrollable">
    基类
        .table
    带边框
        .table-bordered
    无边框
        .table-borderless
    条纹
        .table-striped
    悬停
        .table-hover
    小表格
        .table-sm
    响应式
        总是响应
            .table-responsive
        断点响应
            .table-responsive-[breakpoint]
    表格标题
        &lt;caption&gt;
    黑色背景
        .table-dark
    表头颜色
        .thead-dark
        .thead-light
    行 or 单元格情境色
        .table-active
        .table-primary
        .table-secondary
        .table-success
        .table-info
        .table-warning
        .table-danger
        .table-dark
        .table-light
</pre>


<!-- 表格基本样式 -->
<div class="container">
    <h1>表格基本样式</h1>
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 带边框表格 -->
<div class="container">
    <h1>带边框的表格</h1>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 无边框表格 -->
<div class="container">
    <h1>无边框表格</h1>
    <table class="table table-borderless">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 条纹表格 -->
<div class="container">
    <h1>条纹表格</h1>
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 鼠标悬停状态表格 -->
<div class="container">
    <h1>鼠标悬停状态表格</h1>
    <table class="table table-hover">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 较小的表格 -->
<div class="container">
    <h1>较小的表格</h1>
    <table class="table table-sm">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 响应式表格 -->
<!-- 总是响应 -->
<div class="container">
    <h1>总是响应</h1>
    <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>
</div>

<!-- 多屏幕断点响应 -->
<div class="container">
    <h1>响应式表格</h1>
    <p>.table-responsive-md 类用于创建响应式表格，在屏幕宽度小于 768px 时显示水平滚动条。</p>
    <p>重置浏览器大小查看效果。</p>
    <div class="table-responsive-md">
        <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>
</div>

<!-- caption表格标题 -->
<div class="container">
    <h1>表格标题，默认显示在底部，如果想显示在顶部，通过caption-side样式规则</h1>
    <table class="table">
        <caption>显示在底部</caption>
        <!--        <caption style="caption-side: top; text-align: center;">显示在顶部</caption>-->
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
            <th scope="col">Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 表头颜色 -->
<div class="container">
    <h1>表头颜色</h1>
    <table class="table">
        <caption style="caption-side: top;">thead-dark</caption>
        <thead class="thead-dark">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>

    <table class="table">
        <caption style="caption-side: top;">thead-light</caption>
        <thead class="thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 黑色背景表格 -->
<div class="container">
    <h1>黑色背景表格</h1>
    <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>john@example.com</td>
        </tr>
        <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        </tbody>
    </table>
</div>

<!-- 为行或者单元格指定情境色 -->
<div class="container">
    <h1>行 or 单元格的情境色</h1>
    <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>def@somemail.com</td>
        </tr>
        <tr class="table-primary">
            <td>Primary</td>
            <td>Joe</td>
            <td>joe@example.com</td>
        </tr>
        <tr class="table-success">
            <td>Success</td>
            <td>Doe</td>
            <td>john@example.com</td>
        </tr>
        <tr class="table-danger">
            <td>Danger</td>
            <td>Moe</td>
            <td>mary@example.com</td>
        </tr>
        <tr class="table-info">
            <td>Info</td>
            <td>Dooley</td>
            <td>july@example.com</td>
        </tr>
        <tr class="table-warning">
            <td>Warning</td>
            <td>Refs</td>
            <td>bo@example.com</td>
        </tr>
        <tr class="table-active">
            <td>Active</td>
            <td>Activeson</td>
            <td>act@example.com</td>
        </tr>
        <tr class="table-secondary">
            <td>Secondary</td>
            <td>Secondson</td>
            <td>sec@example.com</td>
        </tr>
        <tr class="table-light">
            <td>Light</td>
            <td>Angie</td>
            <td>angie@example.com</td>
        </tr>
        <tr class="table-dark text-dark">
            <td>Dark</td>
            <td>Bo</td>
            <td>bo@example.com</td>
        </tr>
        </tbody>
    </table>
</div>
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4 表格
shengyin714959的博客
08-17 64
在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。通过添加 .table-striped 类，您将在。.table-bordered 类可以为表格添加边框。
bootstrap4--表格和网格系统
zxn200125的博客
12-15 1744
bootstrap4中的表格、网格系统的使用和css类
WEB前端网页设计-Bootstrap4 表格
君逍遥o
04-10 457
WEB前端网页设计-Bootstrap4 表格
Bootstrap4表格
wspxx00的博客
04-03 155
https://v4.bootcss.com/docs/content/tables/ 这里面很好用 <table class="table table-hover table-bordered"> #应该是设置表的基本格式 <thead class="thead-light"> #应该是设置表头的颜色 <tr> <th scope="col">编号</th> <th scope="col"&gt
bootstrap4支持修改table插件
12-20
bootstrap4支持table修改，仿x-edit样式，如何使用请参考我的博客使用说明。喜欢的话 请支持一哈https://blog.csdn.net/qq_18730505/article/details/85095247
bootstrap动态表格模板
09-23
Bootstrap作为一款流行的开源前端框架，提供了一系列预定义的样式、组件和JavaScript插件，使得开发者能够快速地创建响应式、移动优先的网站。在本模板中，动态表格功能的实现结合了Bootstrap的表格组件以及筛选、...
JS组件系列之Bootstrap table表格组件神器【终结篇】
10-22
在本篇“JS组件系列之Bootstrap table表格组件神器【终结篇】”中，我们将深入探讨其高级特性和实际应用。 1. 表格行样式 表格行样式可以按照需求自定义，例如根据订单状态显示不同颜色。通过Bootstrap Table提供...
JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】
10-22
`oInit.InitSubTable`方法负责加载子表格，通常会通过Ajax请求获取子数据，并使用这些数据初始化新的Bootstrap Table。在这个过程中，我们可以设置子表格的URL、列定义等参数。 接下来，我们讨论行列调序。...
ABP入门系列应用BootstrapTable表格插件
10-20
Bootstrap table是一个开源的轻量级功能非常丰富的前端表格插件。下面通过本文给大家介绍ABP入门系列应用BootstrapTable表格插件，感兴趣的朋友一起学习吧
Bootstrap表格编辑生成器插件.rar
04-29
Bootstrap表格编辑生成器插件是基于流行的前端框架Bootstrap开发的一款实用工具，主要用于简化网页中表格的创建和编辑过程。在现代Web应用中，表格经常被用于展示结构化的数据，而Bootstrap表格编辑生成器则提供了...
bootstrap可编辑表格完整代码
11-07
bootstrap可编辑表格，包含编辑单元格文本、日期类型、下拉框(代码可运行)
bootstrap4 cheat sheet 快捷使用表格
04-03
使用bootstrap4 快捷方式编写代码，可以大大提高编写Bootstrap web的效率
boostrap表格详解
lin1072368472的博客
02-15 468
此文档使用的boostrap是4.3.1 table样式 .table: 表格基本样式 .table-striped：斑马线表格 .table-bordered：给表格添加边框 .table-hover:鼠标悬停的效果 .table-condensed：紧凑型表格 .table-borderless：无边框效果 以上效果都可以混合使用 这里表格html书写结构是 <table> ...
WEB前端网页设计-Bootstrap4 表单
君逍遥o
04-12 745
WEB前端网页设计-Bootstrap4 表单
Bootstrap （4）表格、按钮、图片
A-Select °
01-07 562
Bootstrap 表格 下表样式可用于表格中： .table 为任意 <table> 添加基本样式 (只有横向分隔线) .table-striped 在 <tbody> 内添加斑马线形式的条纹 ( IE8 不支持) 3. .table-bordered 为所有表格的单元格添加边框 .table-hover 在 <tbody> 内的...
Bootstrap系列之表格（Tables）
热门推荐
老__L的博客
05-27 1万+
使用Bootstrap选择表样式的文档和示例(考虑到它们在JavaScript插件中普遍使用)。由于表在第三方小部件(如日历和日期选择器)上的广泛使用，我们将表设计为可选择的。只需将基类添加到任何，然后使用自定义样式或我们的各种包含的修饰类进行扩展。使用最基本的表标记，下面是Bootstrap中基于的表的样子。所有的表样式都在Bootstrap 4中继承，这意味着任何嵌套的表都将以与父表相同的方式设置样式。 效果如图：你也可以用将浅色文本在深色背景上的颜色反转。 效果如图：与表和暗表类似，使用修饰符类或使s
完美解决bootstrap4 table 支持x-edittable 解决方案，分享一下思路（拦截formatter，进一步深加工）
success could be revenge的博客
12-19 4933
--------------------------2019/1/11日跟新--------- 修复bootstrap-select，更改值后不生效问题  ，如果之前有下载的，麻烦告诉我邮箱，我私发更新的js  -------------------------2018-/12/20日更新----------------------- 喜欢的话请多多支持。可以交流，花1天时间弄 ，弄得不好。...
一文掌握 bootstrap 4 的用法
Wu_yongtao的博客
04-20 465
bootstrap 4 笔记 Bootstrap v4 中文文档 ​ 这份笔记是本人在 Bootstrap v4 中文文档 学习时记录的，记录一些本人认为重要或会常用到的内容，部分文段翻译如有误，请联系 qq: 1337647373 文章目录bootstrap 4 笔记1. 快速上手1. 1 CSS文件1.2 JS文件集成包分开加载1. 3 入门示例1.4 图标库使用(1) 内嵌(2) Sprite(3) 作为外部图片文件引用(4) 图标字体 (推荐)1.5 Overview2. 布局(Containe
bootstrap jquery 表格编辑
最新发布
06-12
Bootstrap 的表格编辑需要使用一个插件，如 Bootstrap Table，它提供了一系列的 API 和事件，可以方便地对表格进行编辑和操作。 jQuery 的表格编辑则需要使用 jQuery 插件，如 DataTables，它也提供了一些 API 和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值