Bootstrap 表格

最新推荐文章于 2024-06-07 10:28:47 发布
最新推荐文章于 2024-06-07 10:28:47 发布
阅读量936 收藏 11
点赞数 2
分类专栏： 前端 文章标签： Bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27870421/article/details/96977444
版权
一、Bootstrap 表格

1.1 基础表格

Bootstrap4 通过 .table 类来设置基础表格的样式，实例如下:

<div class="container">
  <h2>基础表格</h2>
  <p>.table 类来设置基础表格的样式:</p>            
  <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>
</div>

在这里插入图片描述

1.2 条纹表格

通过添加 .table-striped 类，您将在 <tbody> 内的行上看到条纹，如下面的实例所示：

<div class="container">
  <h2>条纹表格</h2>
  <p>通过添加 .table-striped 类，来设置条纹表格:</p>            
  <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>
</div>

在这里插入图片描述

1.3 带边框表格

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

<div class="container">
  <h2>带边框表格</h2>
  <p>.table-bordered 类可以为表格添加边框:</p>            
  <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>
</div>

在这里插入图片描述

1.4 鼠标悬停状态表格

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

<div class="container">
  <h2>鼠标悬停状态表格</h2>
  <p>.table-hover 类可以为表格的每一行添加鼠标悬停效果（灰色背景）：</p>            
  <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>
</div>

在这里插入图片描述

1.5 黑色背景表格

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

<div class="container">
  <h2>黑色背景表格</h2>
  <p>.table-dark 类可以为表格添加黑色背景：</p>            
  <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>

在这里插入图片描述

1.6 黑色条纹表格

联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：

<div class="container">
  <h2>黑色条纹表格</h2>
  <p>联合使用 .table-dark 和 .table-striped 类可以创建黑色的条纹表格：</p>            
  <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>
</div>

在这里插入图片描述

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

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

<div class="container">
  <h2>鼠标悬停效果 - 黑色背景表格</h2>
  <p>联合使用 .table-dark 和 .table-hover 类可以设置黑色背景表格的鼠标悬停效果：</p>            
  <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>
</div>

在这里插入图片描述

1.8 指定意义的颜色类

<div class="container">
  <h2>指定意义的颜色类</h2>
  <p>通过指定意义的颜色类可以为表格的行或者单元格设置颜色：</p>            
  <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>

在这里插入图片描述

1.9 表格颜色类的说明

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

1.10 表头颜色

在 Bootstrap v4.0.0-beta.2 中.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景:
在 Bootstrap v4.0.0-beta 这个版本中，.thead-inverse 类用于给表头添加黑色背景，.thead-default 类用于给表头添加灰色背景。

<div class="container">
  <h2>表头颜色</h2>
  <p>.thead-dark 类用于给表头添加黑色背景， .thead-light 类用于给表头添加灰色背景:</p>            
  <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>
</div>

在这里插入图片描述

1.11 较小的表格

.table-sm 类用于通过减少内边距来设置较小的表格:

<div class="container">
  <h2>较小的表格</h2>
  <p>.table-sm 类用于通过减少内边距来设置较小的表格:</p>            
  <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>
</div>

在这里插入图片描述

1.12 响应式表格

.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:

<div class="container">
  <h2>响应式表格</h2>
  <p>.table-responsive 类用于创建响应式表格：在屏幕宽度小于 992px 时会创建水平滚动条，如果可视区域宽度大于 992px 则显示不同效果（没有滚动条）:</p>                                                                                      
  <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-sm< 576px
.table-responsive-md< 768px
.table-responsive-lg< 992px
.table-responsive-xl< 1200px
<div class="container">
  <h2>响应式表格</h2>
  <p>.table-responsive-sm 类用于创建响应式表格，在屏幕宽度小于 576px 时显示水平滚动条。</p>                                                                                      
  <p>重置浏览器大小查看效果。</p>
  <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>
</div>

在这里插入图片描述

书香水墨
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
bootstrap 表格
01-26
Bootstrap表格提供了丰富的样式和交互功能，能够帮助开发者快速创建美观且功能齐全的数据展示界面。 在“bootstrap 表格（可编辑）”这个主题中，我们关注的是如何创建一个不仅用于展示数据，还能让用户直接在页面...
Bootstrap表格编辑生成器插件.rar
04-29
Bootstrap表格编辑生成器插件是基于流行的前端框架Bootstrap开发的一款实用工具，主要用于简化网页中表格的创建和编辑过程。在现代Web应用中，表格经常被用于展示结构化的数据，而Bootstrap表格编辑生成器则提供了...
bootstrap表格API文档
weixin_40992252的博客
03-18 1484
【代码】bootstrap表格API文档。
Bootstrap框架集成ECharts教程
枫叶
06-07 1055
绘制ECharts
BootStrap表格详解
july_29的博客
10-11 3202
表格 html： 表格标签用table标签表示，每一行由<tr>表示。表格是由行组成，行由列组成,列由<td>单元格组成。 <table> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr>
2.5 Bootstrap 表格
梁辰兴的博客
07-02 470
内，您可以让表格水平滚动以适应小型设备（小于 768px）。当在大于 768px 宽的大型设备上查看时，您将看不到任何的差别。，行内边距（padding）被切为两半，以便让表看起来更紧凑，如下面的实例所示。Bootstrap 提供了一个清晰的创建表格的布局。如果您想要一个只带有内边距（padding）和水平分割的基本表，请添加。下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。，还有一些可以用来为标记定义样式的类。这些类可被应用到 、 或 。除了基本的表格标记和。
Bootstrap表格
2401_84046912的博客
04-23 859
如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格，如你想要快速建立一个传统的表格，那就建议选择layui表格，layui表格它可以实现数据的动态化，但是它如果存在过多的列，并且当屏幕缩小比例的话，那么它就会将表格压缩，这样找起数据会比较麻烦。但是此时的Bootstrap表格却有一个功能可以实现给表格添加滚动条，这样数据就不会被压缩，只要移动滚动条就能够快速找到数据。
Bootstrap表格样式
奋斗的日子最甜美，在科技的海洋里，永无止境。
04-03 9538
Bootstrap表格样式 Bootstrap表格样式分类 基础样式.table 2.带背条纹表格.table-striped 3.带边框.table-border 4.悬停.table-hover 5.紧凑.table-condensed 6.行样
bootstrap表格后端分页
weixin_46389242的博客
02-22 219
bootstrap表格后端分页。
bootstrap表格使用
xxaann的博客
05-17 588
bootstrap表格使用 第一点：bootstrap tab好用,并且是前端分页（就是不需要去读后台数据库来辅助分页） 你下载了bootstrap，不是你就有了bootstrap table插件，你还得要下载bootstrap table插件； bootstrap下载地址：http://www.bootcss.com/ bootstrap table插件下载地址（下面3个有关）最好是从Githu...
bootstrap表格添加序号
weixin_46389242的博客
11-05 678
bootstrap表格添加序号 { title: '序号', align: 'center', halign: 'center', width: '5%', formatter: function(value, row, index) { var options = $('#' + id).bootstrapTable('getOptions'); return options.pageSize + index + 1 -
bootstrap表格属性
mqingo的博客
06-03 1499
条纹状表格无边框　table-striped边框状表格　table-bordered鼠标悬停并改变颜色表格无边框  table-hover 紧缩表格无边框    table-condensedtable class='responsive' 为响应式表格 (无边框）tr中 class='active' 鼠标悬停在行或单元格上时所设置的颜色class='success' 标识成功或积极的动作clas...
bootstrap表格
11-13
Bootstrap表格是前端开发中常用的一种组件，它是基于Twitter Bootstrap框架构建的，用于展示结构化的数据。Bootstrap表格以其简洁、响应式的设计和丰富的功能，深受开发者喜爱。在本篇中，我们将深入探讨Bootstrap...
jQuery动态生成Bootstrap表格
10-21
在本文中，我们将深入探讨如何使用jQuery动态生成Bootstrap表格，这是一种高效的方法，可以在网页上创建交互式的、响应式的表格。Bootstrap框架提供了丰富的样式和组件，而jQuery则是一种强大的JavaScript库，用于...
23.1 Bootstrap 表格
10-02
Bootstrap表格是前端开发中常用的一种布局工具，尤其在构建响应式网页时不可或缺。Bootstrap是由Twitter开发并开源的一个前端框架，它提供了一系列预先设计的样式、组件和JavaScript插件，简化了网页开发流程。本篇...
2019年中国民航大学电子制作比赛---蓝牙音响.zip
08-03
大学生参加学科竞赛有着诸多好处，不仅有助于个人综合素质的提升，还能为未来职业发展奠定良好基础。以下是一些分析： 首先，学科竞赛是提高专业知识和技能水平的有效途径。通过参与竞赛，学生不仅能够深入学习相关专业知识，还能够接触到最新的科研成果和技术发展趋势。这有助于拓展学生的学科视野，使其对专业领域有更深刻的理解。在竞赛过程中，学生通常需要解决实际问题，这锻炼了他们独立思考和解决问题的能力。 其次，学科竞赛培养了学生的团队合作精神。许多竞赛项目需要团队协作来完成，这促使学生学会有效地与他人合作、协调分工。在团队合作中，学生们能够学到如何有效沟通、共同制定目标和分工合作，这对于日后进入职场具有重要意义。 此外，学科竞赛是提高学生综合能力的一种途径。竞赛项目通常会涉及到理论知识、实际操作和创新思维等多个方面，要求参赛者具备全面的素质。在竞赛过程中，学生不仅需要展现自己的专业知识，还需要具备创新意识和解决问题的能力。这种全面的综合能力培养对于未来从事各类职业都具有积极作用。 此外，学科竞赛可以为学生提供展示自我、树立信心的机会。通过比赛的舞台，学生有机会展现自己在专业领域的优势，得到他人的认可和赞誉。这对于培养学生的自信心和自我价值感非常重要，有助于他们更加积极主动地投入学习和未来的职业生涯。 最后，学科竞赛对于个人职业发展具有积极的助推作用。在竞赛中脱颖而出的学生通常能够引起企业、研究机构等用人单位的关注。获得竞赛奖项不仅可以作为个人履历的亮点，还可以为进入理想的工作岗位提供有力的支持。
22NM60N-VB TO220一款N-Channel沟道TO220的MOSFET晶体管参数介绍与应用说明
最新发布
08-03
22NM60N-VB TO220；Package：TO220；Configuration：Single-N-Channel；VDS：650V；VGS：30（±V）；Vth：3.5V；RDS(ON)=160mΩ@VGS=10V；ID：20A；Technology：SJ_Multi-EPI；
22N60L-VB一款N-Channel沟道TO247的MOSFET晶体管参数介绍与应用说明
08-03
22N60L-VB；Package：TO247；Configuration：Single-N-Channel；VDS：650V；VGS：30（±V）；Vth：3.5V；RDS(ON)=160mΩ@VGS=10V；ID：20A；Technology：SJ_Multi-EPI；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

书香水墨

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

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

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

打赏作者

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

抵扣说明：

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

余额充值