Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

内容	参数
OS	Windows 10 x64
browser	Firefox 65.0.2
framework	Bootstrap 3.3.7
editor	Visual Studio Code 1.32.1
typesetting	Markdown

code

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><!-- IE将使用最新的引擎渲染网页 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 页面的宽度与设备屏幕的宽度一致初始缩放比例 1:1 --><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo</title><meta name="author" content="www.cnblogs.com/kemingli"><!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 --><link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --><!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --><!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->
</head><body><!-- start : demo --><div class="container"><!--table-bordered:给表格加外边框table-striped:隔行换色 bootstrap是浅灰色与白色交替--><table class="table table-bordered table-striped"><tr><td>序号</td><td>名称</td></tr><tr><td>1</td><td>锦</td></tr><tr><td>2</td><td>绢</td></tr><tr><td>3</td><td>帛</td></tr><tr><td>4</td><td>布</td></tr><tr><td>5</td><td>绵</td></tr><tr><td>6</td><td>蜂蜜</td></tr><tr><td>7</td><td>蜜蜡</td></tr><tr><td>8</td><td>蜜蜂</td></tr><tr><td>9</td><td>土蜂</td></tr></table></div><!-- end : demo --><!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 --><script src="bootstrap/js/jquery.min.js"></script><!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 --><script src="bootstrap/js/bootstrap.min.js"></script>
</body></html>

result

resource

[ 文档 ] getbootstrap.com/docs/3.3
[ 源码 ] github.com/twbs/bootstrap
[ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
[ 平台 ] www.cnblogs.com
[ 平台 ] github.com
[ 扩展 - 平台] www.bootcss.com
[ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

Bootstrap是前端开源框架，优秀，值得学习。
博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。
Firefox是开源的浏览器，优秀，值得关注。
面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。
博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

转载于:https://www.cnblogs.com/kemingli/p/10545571.html

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）相关推荐

前端简单入门第十八讲使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
微信小程序表格实现隔行换色
微信小程序的表格样式实现隔行换色: 用三元表达式改变标签class名, 在wxss分别写不同的类名: flex-view-itemodd flex-view-itemeven <view cla ...
前端html利用CSS实现table表格斑马纹隔行换色效果
在网页中,表格是一种常用的数据展示方式,如下面的实例就是一个收支数据的表格. <!DOCTYPE html> <html lang="en"><hea ...
Bootstrap3基础 warning/active... 表格的状态类（不同的背景色）
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
隔行换色并且鼠标指向行变色的表格
一应用对于一些清单型数据,通常是利用表格展示到页面中.如果数据比较多,很容易看串行.这时,可以为表格添加隔行换色并且鼠标指向行变色功能. 二代码 <script language=&quo ...
Vue中实现表格隔行换色效果
一.原理在 Vue 中,进行表格行的循环输出时,一般使用 v-for 指令,每次循环都能得到该行的索引 index ,用每一行的索引除以2取余,余数等于1,可以使用一种颜色作为背景色,余数等于0,可 ...
JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
JQuery基础下面案例用到的资源包:https://download.csdn.net/download/weixin_44537122/11879014 1.内容 1. JQuery 基础:1. ...
Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
使用css选择器实现表格隔行换色
使用css选择器实现表格隔行换色 <style>*{margin: 0;padding: 0;}body{padding: 200px;box-sizing: border-box;}ta ...

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）

code

result

resource

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）相关推荐

最新文章

热门文章