WEB前端网页设计-Bootstrap4 表格

已于 2023-04-10 16:26:37 修改
阅读量449 收藏
点赞数
分类专栏： WEB-HTML/CSS 文章标签： html javascript dreamweaver
于 2023-04-10 16:11:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57099902/article/details/130062744
版权

目录

Bootstrap4 基础表格

条纹表格

带边框表格

鼠标悬停状态表格

黑色背景表格

黑色条纹表格

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

无边框表格

指定意义的颜色类

表头颜色

较小的表格

响应式表格

Bootstrap4 基础表格

Bootstrap4 通过 .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-bordered 类可以为表格添加边框

<table class="table table-bordered">
    <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 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-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 类用于给表头添加灰色背景。

<table class="table">
    <thead class="thead-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="thead-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
<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>
你可知这世上再难遇我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap4支持修改table插件
12-20
bootstrap4支持table修改，仿x-edit样式，如何使用请参考我的博客使用说明。喜欢的话 请支持一哈https://blog.csdn.net/qq_18730505/article/details/85095247
Bootstrap CSS-4表格
weixin_42242043的博客
05-01 125
一、表格标签 <table>:定义一个表格 <thead>:定义一个标题栏 <th>：只能在thead里面使用，表示列 <tbody>:表格内容了 <tr>：行 <td>：列 二、表格类 （一）只能用在table里面 .table:只会产生水平线的横线，当然表格内容整体看起来不那么拥挤 .table-responsive:通...
Bootstrap(4)之表格和表单
我的菜鸟之路
12-25 1252
首先来说一下表格，bootstrap的表格 有专门的class="table"。 Table基本案例 First Name Last Name User Name aehyok
Bootstrap（二）
weixin_55685975的博客
04-23 1192
表格 基础表格       .table 类来设置基础表格的样式 条纹表格       .table-striped 类，<tbody>内的行上添加条纹 带边框表格       .table-bordered 类可以为表格添加边框 鼠标悬停状态表格      &nbsp
bootstrap4--表单
zxn200125的博客
12-20 3627
bootstrap4中表单布局、输入框组，以及默认和自定义表单控件的一些设置
bootstrap4--表格和网格系统
zxn200125的博客
12-15 1725
bootstrap4中的表格、网格系统的使用和css类
BootStrap4内容系列之表格
爱喝水的qdy的博客
12-02 417
目录官方文档地址其他中文文档地址表格基本样式带边框表格无边框表格条纹状表格鼠标悬停状态表格较小的表格响应式表格总是响应多屏幕断点响应caption表格标题表头颜色黑色背景表格为行或者单元格指定情境色整体代码 官方文档地址 https://getbootstrap.com/docs/4.4/content/tables/ 其他中文文档地址 菜鸟教程 https://www.runoob.com/...
Bootstrap4 表格
s3337838的博客
02-12 187
Bootstrap4 表格
WEB前端网页设计-Bootstrap4 表单
君逍遥o
04-12 699
WEB前端网页设计-Bootstrap4 表单
bootstrap4 cheat sheet 快捷使用表格
04-03
使用bootstrap4 快捷方式编写代码，可以大大提高编写Bootstrap web的效率
bui-bootstrap.rar
11-13
web前端开发人员必备模块，后台管理系统，静态HTML页面；后台框架：首页布局代码；右侧导航，右侧菜单，动态菜单，顶部导航，表单代码、表单验证代码，表格，可以编辑编辑、搜索代码，搜索页面代码、详情页面代码等
bootstrap-table表格组件
01-15
网页表格控件，简洁、直观、强悍、移动设备优先的前端表格控件,让web开发更迅速、简单。
浅析Bootstrap表格的使用
09-02
Bootstrap - 简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、简单。下面给大家介绍Bootstrap表格的使用的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧
less-rails-bootstrap：最流行的前端框架，用于在Web上为Rails资产管道开发响应式，移动优先项目
02-21
less-rails-bootstrap项目连接到和，从而使Bootstrap的源LESS文件，编译CSS和JavaScript文件在Rails 3.x和4.x资产管道中可用。 好处： 资产在twitter / bootstrap中进行命名空间以避免资产冲突。 顶层要求获取...
Bootstrap 4 HTML 和 Laravel 后台管理仪表板模板
04-02
高度可定制、开发人员友好的管理模板和 UI 工具包 - 旨在为多功能的现代 Web 应用程序提供支持。 具有完整 Laravel 版本的现代 ...数据表：数据表以干净的表格格式显示一组具有前端分页选项的数据。用户可以搜索和排
Bootstrap-04-常用样式——表格
Void的博客
03-01 653
原生表格 <table> <tr> <th>学号</th> <th>姓名</th> <th>学分</th> </tr> <tr> <td>001</td> <td>void
bootstrap 黑边框表格样式_bootstrap4 使用及常用样式详细整理
weixin_32848617的博客
01-13 661
引入方式前端项目基于jquery去构建：可以直接引入cdn库，bootstrap4.css、jquery.js、bootstrap4.js前端项目基于react去构建：bootstrap4.css(scss,less)、react.js、react-bootstrap前端项目基于angular去构建：bootstrap4.css(scss,less)、angular4、ngx-bootstrap目...
Bootstrap4.0前端框架
weixin_52629158的博客
12-06 1121
Boostrap框架
bootstrap模板网页设计
最新发布
11-28
以下是使用Bootstrap模板进行网页设计的步骤： 1. 下载Bootstrap模板，可以从官方网站或其他第三方网站下载。 2. 解压缩下载的文件并打开index.html文件。 3. 根据需要修改index.html文件中的内容，例如标题，文本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

你可知这世上再难遇我

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

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

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

打赏作者

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

抵扣说明：

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

余额充值