内容 参数
  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(三思而后行)！

Bootstrap3基础 table-striped 表格实现隔行换色（浅灰色与白色交替）的更多相关文章

  1. jQuery_完成表格的隔行换色

    表格的颜色一样不利于区分,而利用jQuery则可以很方便的进行表格的隔行换色操作,原表如下: 这样看着很不方便,但是隔行换色之后非常便捷清楚. 代码如下: <!DOCTYPE html> ...

  2. JavaScript学习——表格的隔行换色+高亮显示

    1.案例一:我们希望在后台页面中实现一个隔行换色的效果显示所有的用户信息,显示效果如下: 1)新标签 <thead> //表头 <tr> <th></th&g ...

  3. 使用JS创建表格以及隔行换色（包括隔N行换色）

    <html> <head> <title></title> <style> table{ width:800px; border-colla ...

  4. 模块：jquery实现表格的隔行换色

    效果图: 知识点精讲:jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行,并且索引是从0开始,即第一行为偶数: 代码实现 ...

  5. Bootstrap3基础 table-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. JS案例四：表格的隔行换色以及高亮显示

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Bootstrap3基础 warning/active... 表格的状态类（不同的背景色）

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  8. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

  9. table 表格隔行换色实现

    table 表格隔行换色实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

随机推荐

  1. 11.14 redis

    2018-11-14 10:07:39 购物车有思路,用django中redis来做!!!具体思路参考下面笔记 回学校后,把笔记里面面试题都认真整理一下!!!!!! 越努力,越幸运!永远不要高估自己! ...

  2. 算法提高 最小方差生成树（Kruskal）_模板

     算法提高 最小方差生成树   时间限制:1.0s   内存限制:256.0MB        问题描述 给定带权无向图,求出一颗方差最小的生成树. 输入格式 输入多组测试数据.第一行为N,M,依次是 ...

  3. IsWindowVisible

    IsWindowVisible通过该函数可以获得指定窗口的可视状态,即显示或者隐藏. BOOL IsWindowVisible( HWND hWnd ); hWnd:被测试窗口的句柄. 返回值:如果指 ...

  4. 剑指offer——python【第29题】最小的K个数

    题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. 思路 先排序后取数,排序可以用冒泡,插入,选择,快排,二分法等等, ...

  5. EasyUI Tree节点拖动到指定容器

    效果图:将tree节点拖动到指定的DIV中,结果显示节点的id和text 代码: <!DOCTYPE html> <html> <head> <meta ch ...

  6. HotSpot虚拟机

    注:如其中有不懂的名词,下面有名词解释 1.对象的创建(限于普通Java对象,不包括数组和Class对象等) (1)检查这个指令的参数能否在常量池中定位到一个类的符号引用,并检查这个符号引用代表的类是 ...

  7. [Day12]构造方法、关键字this、super

    1.构造方法:对象创建时要执行的方法 (1)构造方法的格式: 修饰符 构造方法名(参数列表){} 体现: a.构造方法没有返回值类型,也不需要返回值 b.构造方法名称必须和类型保持一致 c.构造方法没 ...

  8. Linux3.10.0块IO子系统流程（0）-- 块IO子系统概述

    前言:这个系列主要是记录自己学习Linux块IO子系统的过程,其中代码分析皆基于Linux3.10.0版本,如有描述错误或不妥之处,敬请指出! 参考书籍:存储技术原理分析--基于Linux 2.6内核 ...

  9. MAVEN day04 SSH之分模块开发

    一.创建父工程 1.选择>>"Maven Project"创建Maven工程.并且选择Packaging为 POM. 创建父工程主要是让子工程区继承父工程,减少冗余,多 ...

  10. python 缺少module

    ImportError: No module named lxml ImportError: No module named PyQt4.QtCore sudo apt-get install pyt ...