Bootstrap表格

如果你想要设计一个有自己特点的表格，那就建议使用Bootstrap表格，如你想要快速建立一个传统的表格，那就建议选择layui表格，layui表格它可以实现数据的动态化，但是它如果存在过多的列，并且当屏幕缩小比例的话，那么它就会将表格压缩，这样找起数据会比较麻烦。但是此时的Bootstrap表格却有一个功能可以实现给表格添加滚动条，这样数据就不会被压缩，只要移动滚动条就能够快速找到数据。下面跟大家分享一下例子：

使用Bootstrap表格之前需要先引入它的CSS样式：（这个可以在Bootstrap官网找到下载，这里这不提供链接了）

<//link href=“~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css” rel=“stylesheet” />

下载了CSS样式之后就可以写HTML代码了，我用的编程软件是Visual Studio 2015，简称VS，你也可以在其他编程软件中使用，如Adobe Dreamweaver CC 2017，简称DW。其实这个例子在VS和DW中写的代码都是一样的。都是在head里面引用CSS链接，在body里面写表格设计的代码。在VS中代码如图1：

图1

效果图如图2：

图2

上面这例子就是体现了Bootstrap和layui之间的一些互补，具体使用哪个就根据实际来决定，有了Bootstrap和layui，它们会帮助你快速高效的运用表格。

使用Bootstrap表格也就意味着任何嵌套表格都将以与父类型相同的方式进行样式化，Bootstrap 4 继承了所有的表格样式，它样式是根据class来实现的，那它到底还有哪些样式呢？

1、table class=“table table-dark”：设置表格的颜色（深色或浅色）

2、thead class=“thead-dark”：设置表头的颜色（浅黑或深灰）

3、table class=“table table-striped”：设置条纹状表格，

优点：可以产生逐行颜色强烈对比的表格样式（以及增加反转），通俗一点就是好区分行，在看数据时不容易看错行

4、table class="table table-bordered：设置表格的边框和间隙，使表格看起来更有整齐。这个边框的颜色会根据表格的颜色自行适应，如果表格为白色它边框就会显示浅灰色，如果表格为深灰色，边框就会显示为白色。

5、table class=“table table-hover”：设置表格的悬停效果，其实就是给表格添加伪类，让鼠标在该行时出现状态提示。

6、table class=“table table-sm”：设置表格的padding值缩减一半，使表格更加紧凑。

7、tr class=“table-primary”：设置表格行的颜色。可以运用在提示上面。

8、List of users：设置表格标题，它默认是隐藏的，可以协助屏幕阅读器用户找到表格、了解表格内容，且决定是否需要阅读它

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数Java工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Java开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Java开发知识点，不论你是刚入门Java开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**