写点什么

Bootstrap 表格

  • 2022 年 5 月 07 日
  • 本文字数:870 字

    阅读完需:约 3 分钟

<//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:


![在这里插入图片描述](https://img-blog.csdnimg.cn/20190617110330823.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0 《一线大厂 Java 面试题解析+后端开发学习笔记+最新架构讲解视频+实战项目源码讲义》无偿开源 威信搜索公众号【编程进阶路】 MzMwNw==,size_16,color_FFFFFF,t_70)


图 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”:设置表格行的颜色。可以运用在提示上面。

用户头像

还未添加个人签名 2022.04.13 加入

还未添加个人简介

评论

发布
暂无评论
Bootstrap表格_Java_爱好编程进阶_InfoQ写作社区