04Bootstrap5表格

最新推荐文章于 2024-03-13 14:26:16 发布
最新推荐文章于 2024-03-13 14:26:16 发布
阅读量145 收藏 1
点赞数
分类专栏： Bootstrap5 文章标签： bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46452300/article/details/121846798
版权
这个示例展示了如何使用Bootstrap5创建各种样式的表格，包括基础表格、条纹表格、鼠标悬停效果、黑色背景表格、无边框表格、指定颜色的表格以及响应式表格。同时，还演示了如何通过添加不同类实现表格的视觉效果，如条纹、悬停、颜色和大小调整等。
摘要由CSDN通过智能技术生成

04Bootstrap5表格

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>菜鸟教程Bootstrap5表格</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--
Bootstrap5 基础表格
Bootstrap5 通过 .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>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>

<!--
条纹表格
通过添加 .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>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>
<!--
鼠标悬停状态表格
.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>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>
<!--
黑色背景表格
.table-dark 类可以为表格添加黑色背景：
-->
<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>
<!--
黑色条纹表格
联合使用 .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>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>
<!--
鼠标悬停效果 - 黑色背景表格
联合使用 .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>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>
<!--
无边框表格
.table-borderless 类可以设置一个无边框的表格：
-->
<table class="table table-borderless">
    <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>

<!--
指定意义的颜色类
通过指定意义的颜色类可以为表格的行或者单元格设置颜色：
.table-primary     蓝色: 指定这是一个重要的操作
.table-success     绿色: 指定这是一个允许执行的操作
.table-danger      红色: 指定这是可以危险的操作
.table-info            浅蓝色: 表示内容已变更
.table-warning     橘色: 表示需要注意的操作
.table-active      灰色: 用于鼠标悬停效果
.table-secondary   灰色: 表示内容不怎么重要
.table-light       浅灰色，可以是表格行的背景
.table-dark            深灰色，可以是表格行的背景
-->
<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>
<!--
表头颜色
我们也可以设置表头的颜色，例如
.table-dark 类用于给表头添加黑色背景，
.table-light 类用于给表头添加灰色背景:
-->
<table class="table">
    <thead class="table-dark">
    <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>
<table class="table">
    <thead class="table-light">
    <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>
<!--
较小的表格
.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>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>
<!--
响应式表格
.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
.table-responsive-xxl  < 1400px
-->
<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>
</body>
</html>

在这里插入图片描述

夏至xz
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrapTable使用示例.rar
04-14
bootstrapTable组件的使用示例，里面包含父子表、treegrid以及结合knockoutjs的使用示例。博客园博主本人资源，有问题可以联系。
Bootstrap4(六)
shi199434的博客
12-17 312
Bootstrap4 表格 Bootstrap4 基础表格 Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下: 实例 table class="table"> thead> tr> th>Firstnameth> th>Lastnameth> th>Emailth> tr> thead> tbody> tr> td>J
BootStrap笔记-文本颜色&链接颜色&背景颜色
IT1995的博客
01-17 2363
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- bootstra
bootstrap-table 实战示例
最新发布
qq_19783793的博客
03-13 525
bootstrap-table 实战
bootstrap-table示例
赶路人儿
06-17 1204
废话不多说，先上一个基本示例，然后逐步介绍功能和配置。 1、远程加载列表数据： 1）引入库： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/boot
bootstrap动态表格模板
09-23
首先，我们来了解一下Bootstrap表格的基础知识。Bootstrap的表格设计简洁、清晰，支持各种类型的表格样式，如 striped（斑马纹）、hover（鼠标悬停高亮）和bordered（带边框）。通过简单的HTML标记和类名，可以轻松...
jQuery动态生成Bootstrap表格
10-21
在本文中，我们将深入探讨如何使用jQuery动态生成Bootstrap表格，这是一种高效的方法，可以在网页上创建交互式的、响应式的表格。Bootstrap框架提供了丰富的样式和组件，而jQuery则是一种强大的JavaScript库，用于...
BootStrap数据表格实例代码
08-29
Bootstrap数据表格实例代码知识点总结 Bootstrap是当前流行的前端框架之一，Bootstrap数据表格是指使用Bootstrap框架实现的数据表格功能。下面将对Bootstrap数据表格实例代码进行详细解释，并总结出相关知识点。 ...
bootstrap 表格
01-26
Bootstrap表格提供了丰富的样式和交互功能，能够帮助开发者快速创建美观且功能齐全的数据展示界面。 在“bootstrap 表格（可编辑）”这个主题中，我们关注的是如何创建一个不仅用于展示数据，还能让用户直接在页面...
Bootstrap Table的官网例子
09-27
本人因为项目开发的需要，需要用到一个表格插件。于是看上了Bootstrap Table，官网只是给了一个例子，于是我把官网的代码给爬下来。在基础上进行自己的修改。如果有兴趣可以下载来看看，代码个官网的是一模一样的。
Bootstrap5 表格讲解
qq_65552364的博客
06-02 2268
目录一、基础表格二、表格颜色三、活动类表格四、条纹表格五、带边框表格六、无边框表格七、响应式表格 对于这个基础表格的写法，想必大家也非常熟悉，我们来看一下代码吧 而类.table为我们很好的修改了表格的样式，例如默认宽度为100%，内容之间的间距及底部边框，使我们在创建表格的时候更加方便在bootstrap5中设置了8种颜色样式，图中英文即为设置该种颜色所需要的类名 通过指定意义的颜色类名还可以为整个表格添加颜色样式 通过指定意义的颜色类名还可以为表头、表注添加颜色样式 关
bootstrap 黑边框表格样式_bootstrap布局之排版样式、列表样式、表格样式介绍
weixin_39622980的博客
12-22 197
布局容器bootstrap它认为每一个网页都应该会拥有固定的宽度，它会在容器里面水平垂直居中或者是占满容器的100%的宽度。Bootstrap将全局font-size设置为14px，行高为1.428(20px)，段落行高设置为等于1/2(10px)，颜色为#3331)固定的宽度.container类用于固定宽度并支持响应式布局的容器(水平居中)。2)百分比宽度.container-fluid用于1...
WEB前端网页设计-Bootstrap5 表格
君逍遥o
04-30 2003
WEB前端网页设计-Bootstrap5 表格
Bootstrap（二）
weixin_55685975的博客
04-23 1296
表格 基础表格       .table 类来设置基础表格的样式 条纹表格       .table-striped 类，<tbody>内的行上添加条纹 带边框表格       .table-bordered 类可以为表格添加边框 鼠标悬停状态表格      &nbsp
Bootstrap5 表格
qq_44174346的博客
07-28 199
=""
Bootstrap 5-表格
m0_73839298的博客
09-16 382
特征：表格添加滚动条（当它在水平方向上太大时，达到一定数量时才会出现滚动条，35个th或35td就会出现滚动条)• table-secondary （不太重要的动作，灰色)• table-active（将悬停颜色，行/列均可以，灰色)• table-light （浅灰色表格或表格行背景)• table table-bordered（带边框的表格）• table-dark （深灰色表格或表格行背景)• table-hover（表格有悬停效果的行）• table-striped（表格条纹行）
bootstrapTable实现动态表格
Running_Zhang55的博客
12-14 1272
bootstrapTable实现动态表格 1.定义动态表头生成 2.构造表格，构造表格前进行table销毁，否则保留有上次的加载内容 参考文章：如何实现Bootstrap的动态表格
Bootstrap CSS表格布局详解与响应式设计
4. `.table` 类：这是Bootstrap表格的基本类，适用于所有行和列。它设置了表格宽度为100%，并允许最大宽度不超过父容器。同时，第一行的表头和数据行都有默认的内边距、行高和顶部/底部边框。 5. 响应式布局的 `....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夏至xz

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值