注册有礼
您现在的位置是：群英 > 开发技术 > web开发
如何利用Bootstrap做表格隔行变颜色的效果
Admin发表于 2022-05-07 17:38:011638 次浏览
关于“如何利用Bootstrap做表格隔行变颜色的效果”的知识点有一些人不是很理解，对此小编给大家总结了相关内容，文中的内容简单清晰，易于学习与理解，具有一定的参考学习价值，希望能对大家有所帮助，接下来就跟随小编一起学习一下“如何利用Bootstrap做表格隔行变颜色的效果”吧。

bootstrap中，可用“.table-striped”表格类实现隔行变色，该表格类用于在tbody标签内将奇数行的背景设为灰色，只需要给表格元素添加“class="table table-striped"”样式即可。

本教程操作环境：Windows7系统、bootsrap3.3.7版、DELL G3电脑

bootstrap什么可以实现隔行变色

通过添加 .table-striped class，将在 <tbody> 内的行上看到条纹。

可用“.table-striped”表格类实现隔行变色，只需要给表格元素添加“class="table table-striped"”样式即可。

示例如下：

<html>
<head>
<meta charset="utf-8"> 
<title>Bootstrap 实例 - 条纹表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-striped">
<caption>条纹表格布局</caption>
<thead>
<tr>
<th>名称</th>
<th>城市</th>
<th>邮编</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tanmay</td>
<td>Bangalore</td>
<td>560001</td>
</tr>
<tr>
<td>Sachin</td>
<td>Mumbai</td>
<td>400003</td>
</tr>
<tr>
<td>Uma</td>
<td>Pune</td>
<td>411027</td>
</tr>
</tbody>
</table>
</body>
</html>

输出结果：


以上就是关于“如何利用Bootstrap做表格隔行变颜色的效果”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

标签： 表格隔行变色
上一篇： Bootstrap3和Bootstrap2有什么不同吗，怎么选
下一篇： Bootstrap内置插件包括什么，分别有什么作用
相关信息推荐
PHP的工厂模式和单例模式的简单实现是怎样
2022-08-05 17:51:43　
摘要：给大家带来一篇关于详解PHP设计模式中工厂模式和单例模式的相关教程文章，内容涉及到PHP、设计模式、工厂模式、单例模式、PHP设计模式之工厂模式与单例模式等相关内容，已被713人关注，更多关于PHP设计模式之工厂模式与单例模式的内容希望能够帮助到大家。
PHP反序列化之字符逃逸是什么？
2022-07-26 17:44:41　
摘要：本篇文章给大家带来了关于PHP的相关知识，其中主要介绍了关于反序列化字符逃逸的相关问题，php序列化后的字符串经过替换或修改，导致字符串长度变化，总是先序列化，在进行替换修改操作，下面一起来看一下，希望对大家有帮助。
JQuery怎么实现一个自定义弹出对话框
2022-05-05 15:16:13　
摘要：写一个简单的基于jquery的对话框，可以封装之后放到自己的项目里面，下面直接给出css代码和js代码，以及html代码
云活动
推荐内容
  • PHP中替换第一位字符的方法和代码是什么
    2022-12-14 11:21:38
  • Python使用中有哪些高效、实用的高级技巧
    2022-08-19 17:53:01
  • 新手学习Python有哪些关键字要掌握
    2022-08-19 17:51:59
    • 热门关键词
    表格隔行变色 jsp pandas apply() nginx服务器 了解CDN技术 go module php ucs2编码 C语言 单链表 c语言数据存储 html Lambda 开发语言,PHP CentOS环境下 OpenAI ChatGPT 接入微信 Golang 连接Ldap C语言联合体Union redis集合 Java实现Kruskal算法 AI假新闻 sqlyog foreach遍历对象 plsql连接远程Oracle Nginx根目录访问 oracle decode remote的用法 oracle数据泵导入 mysql修改root密码 数据表创建索引 命名空间 os.path
    热门信息
  • Python怎么样创建txt文件，写入方法是什么？
    2022-01-24 19:23:44
  • Python中如何求阶乘？教你四个方法
    2022-02-25 17:19:26
  • pycharm怎么完全卸载？两个步骤帮你搞定
    2022-01-04 18:53:44
  • Java中map判断是否存在key怎样做？教你两个方法
    2022-01-26 18:39:38
  • Python中怎样利用while求1到100的和？
    2021-11-20 17:46:01
  • Java中string转date有哪些方式，怎样实现？
    2022-01-18 18:00:09
  • Python中怎么定义数组？教你三种方法
    2022-01-13 18:58:11
  • Python中的eval函数的作用是什么，怎样用？
    2022-01-24 19:23:57
  • 用python如何读取csv文件，你知道几种方法？
    2021-11-22 17:53:55
  • python中怎样统计元素出现的次数，方法有哪些？
    2021-11-20 17:45:40
    • 群英网络助力开启安全的云计算之旅
    立即注册，领取新人大礼包
    专业资深工程师驻守
    7X24小时极速响应
    一站式无忧技术支持
    免费备案服务
    • 联系我们
    • 24小时售后：4006784567
    • 24小时TEL ：0668-2555666
    • 售前咨询TEL：400-678-4567

    • 官方微信
      官方微信
    Copyright  ©  QY  Network  Company  Ltd. All  Rights  Reserved. 2003-2019  群英网络  版权所有   茂名市群英网络有限公司
    增值电信经营许可证 : B1.B2-20140078   粤ICP备09006778号
    免费拨打 400-678-4567
    免费拨打 400-678-4567 免费拨打 400-678-4567 或 0668-2555555
    微信公众号
    返回顶部
    返回顶部 返回顶部