内容 参数
  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-hover:鼠标悬停时，对应的行变色

        -->

        <table class="table table-bordered table-hover">

            <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-bordered/hover 表格加外边框和鼠标悬停对应行的背景色加深的更多相关文章

  1. word中几个好用的宏代码（立方米上标、关闭样式自动更新、删除无效样式、表格加粗边框、宋体引号）

    Sub 替换立方米() With Selection.Find .Text = "m3" .Replacement.Text = "mm3" .Forward ...

  2. 表格隔行变色_CSS实现鼠标悬停高亮

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  3. table 会有默认的外边框，内部会有分割线

    .表格中边框的显示 只显示上边框 <table frame=above> 只显示下边框 <table frame=below> 只显示左.右边框 <table frame ...

  4. Bootstrap3基础 table-responsive 响应式表格

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

  5. NPOI_winfrom导出Excel表格（一）（合并单元格、规定范围加外边框、存储路径弹框选择）

    1.导出 private void btn_print_Click(object sender, EventArgs e) { DataTable dtNew = new DataTable(); d ...

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

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

  7. Bootstrap3基础 table-condensed 表格中的单元格紧凑一些

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

  8. Bootstrap框架(基础篇)之列表,表格,表单

    继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>… ...

  9. HTML基础（四）表格

    定义和用法 <table> 标签定义 HTML 表格. 简单的 HTML 表格由 table 元素以及一个或多个 tr.th 或 td 元素组成. tr 元素定义表格行,th 元素定义表头 ...

随机推荐

  1. artTemplate的使用案列

    (2) https://github.com/aui/art-template/wiki/syntax:simple

  2. meat标签

    1.文档兼容模式的定义 Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响.简单的说,就是什么版本 IE 就用什么版本 ...

  3. oracle sqlplus命令详解

    涉及到的知识要点 a.带有一个&的替换变量的用法b.带有两个&的替换变量用法c.define命令用法d.accept命令用法e.定制SQL*Plus环境f.在glogin.sql文件中 ...

  4. 利用pl/sql执行计划评估SQL语句的性能简析

    一段SQL代码写好以后,可以通过查看SQL的执行计划,初步预测该SQL在运行时的性能好坏,尤其是在发现某个SQL语句的效率较差时,我们可以通过查看执行计划,分析出该SQL代码的问题所在.  那么,作为 ...

  5. layui封装自定义模块

    转自:https://lianghongbo.cn/blog/430585105a35948c layui是国人开发的一款非常简洁的UI框架,使用了模块化加载方式,因此在使用过程中我们难免需要添加自己 ...

  6. java web实现在cookie中保存用户名和密码，用户自动登入

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. php(数组方法

    什么是数组? 数组就是一组数据的集合 其表现形式就是内存中的一段连续的内存地址 数组名称其实就是连续内存地址的首地址 关于js中的数组特点 数组定义时无需指定数据类型 数组定义时可以无需指定数组长度 ...

  8. 架构3(基于LVS LB集群解决方案一：piranha)

    1.实现调度器的HA 2.对realserver做健康检测 3.动态维护IPVS路由表 pulse 活跃和备用lvs路由器中都会运行pulse守护进程,在备用路由器中,pulse向活跃的服务器的公共接 ...

  9. [tldk][dpdk][dev] TLDK--基于dpdk的用户态协议栈传输层组件简单调研

    如题,以下是一份简单的快速调研. TLDK: Transport Layer Development Kit 一 什么是TLDK transport layer development kit 处理t ...

  10. 快速构建一个使用axios的vue应用程序（转）

    英文原文:https://www.sitepoint.com/fetching-data-third-party-api-vue-axios/ 译文:https://segmentfault.com/ ...