内容 参数
  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. react Context

    import React, { useState, useEffect, useContext } from "react"; import axios from "ax ...

  2. Ant 批量执行jmeter 脚本

    一.环境准备: 1.Jdk1.6或以上:http://www.oracle.com/technetwork/java/javase/downloads/index.html 命令行输入:java -v ...

  3. v-if和v-show

    1.v-if 当值为 true时,显示元素 ,当值为false时,改元素消失------------------(销毁与重建dom) 2.v-show 当值为 true时,显示元素(display:b ...

  4. Matplotlib学习

    决定通过一个个例子来实践并掌握Matplotlib.. 例子1. 画一个散点图,数据分布如下: import numpy as np import pandas as pd import matplo ...

  5. 201621123049《java程序设计》第四周学习总结

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 继承 类型转换 覆盖 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. 2. 书面作业 1. ...

  6. Redis集合 安装 哨兵集群 配置

    redis相关 redis基础 redis发布订阅 redis持久化RDB与AOF redis不重启,切换RDB备份到AOF备份 redis安全配置 redis主从同步 redis哨兵集群 redis ...

  7. POJ 2689 - Prime Distance - [埃筛]

    题目链接:http://poj.org/problem?id=2689 Time Limit: 1000MS Memory Limit: 65536K Description The branch o ...

  8. spark-sql将Rdd转换为DataFrame进行操作的两种方法

    SparkConf sparkConf = new SparkConf() .setMaster("local").setAppName("ClzMap"); ...

  9. 微信小程序点击图片全屏

    作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文 ...

  10. Please run SwitchHosts! as an Administrator 原因

    github 访问慢的初期,不得已修改host,但直接修改host的文件太不够灵活了,使用switchhost工具. win10 遇到上述问题如这个地址 要撞墙了. 解决方法: 进入 C:\Windo ...