BootStrap笔记-表格方面的配置

代码如下：

<!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"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid"><table class="table"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-striped"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-bordered"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-hover"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-dark"><thead><tr><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table><br/><table class="table table-hover"><thead><tr class="table-primary"><th>FirstName</th><th>LastName</th><th>Email</th></tr></thead><tbody><tr class="table-success"><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr class="table-dark"><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr><tr class="table-danger"><td>AAA</td><td>BBB</td><td>570176391@qq.com</td></tr></tbody></table></div>
</body>
</html>

运行截图如下：

其中的table-hover的含义是鼠标放上去有这样的效果：

其他方面说明：

类名	描述
.table-primary	重要的颜色
.table-success	成功的颜色
.table-danger	危险的颜色
.table-info	通知的颜色
.table-warning	橘色，注意的地方
.table-active	灰色，鼠标悬停效果
.table-secondary	灰色，表示内容不怎么重要
.table-light	浅灰色，可用于表格行背景
.table-dark	深灰色，可用于表格行背景

BootStrap笔记-表格方面的配置相关推荐

Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
原文:JS组件系列--Bootstrap Table 表格行拖拽(二:多行拖拽) 前言:前天刚写了篇JS组件系列--Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的 ...
JS组件系列——Bootstrap Table 表格行拖拽
JS组件系列--Bootstrap Table 表格行拖拽原文:JS组件系列--Bootstrap Table 表格行拖拽前言:之前一直在研究DDD相关知识,好久没更新JS系列文章了.这两天做了一 ...
bootstrap表格插件php,深入了解Bootstrap table表格插件（一）
这篇文章主要为大家介绍了第一次学习Bootstrap table表格插件的笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下第一次使用Bootstrap-table这个表格插件,记录一下使用过程 ...
BootStrap笔记参考（全）-优极限
目录 BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3 ...
Apollo学习笔记3-定位模块配置
Apollo学习笔记3-定位模块配置环境介绍导航设备参数配置导航设备配置 (1)杆臂配置 (2)GNSS 航向配置 (3)导航模式配置 (4) USB 接口输出设置 (5)网口配置 (6) PP ...
Git笔记（20）配置服务器
Git笔记(20) 配置服务器 1. 提供访问权 2. 创建系统用户 3. 添加公钥 4. 新建一个空仓库 5. 最初版本推送 6. 开发操作 7. 权限限制 1. 提供访问权在 Git笔记(18) ...
ROS学习笔记一：安装配置ROS环境
ROS学习笔记一:安装配置ROS环境在安装完成ROS indigo之后,需要查看环境变量是否设置正确,并通过创建一个简单的实例来验证ROS能否正常运行. 1 查看环境变量在ROS的安装过程中,我们 ...
mesos 学习笔记-- mesos安装和配置
2019独角兽企业重金招聘Python工程师标准>>> mesos 学习笔记-- mesos安装和配置博客分类: 架构 mesos 参考资料: 官方文档:http://mesos. ...

BootStrap笔记-表格方面的配置

BootStrap笔记-表格方面的配置相关推荐

最新文章

热门文章