内容 参数
  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. ECharts（中国地图篇）的使用

    代码html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <me ...

  2. windows环境下Oracle数据库冷备份和恢复

    1.点击开始菜单的“运行”,输入sqlplus/nolog 2.在弹出的命令行窗口以sysdba身份登陆,要输入:系统用户名/登陆密码@数据库实例名,如sys/testora@orcl 3.输入 al ...

  3. imu_tk标定算法

    IMU(惯性测量单位)是机器人中非常流行的传感器:其中,它们被用于惯性导航[1],姿态估计[2]和视觉惯性导航[3],[4],也使用 智能手机设备[5]. 机器人技术中使用的IMU通常基于MEMS(微 ...

  4. 苏宁基于Spark Streaming的实时日志分析系统实践 Spark Streaming 在数据平台日志解析功能的应用

    https://mp.weixin.qq.com/s/KPTM02-ICt72_7ZdRZIHBA 苏宁基于Spark Streaming的实时日志分析系统实践 原创: AI+落地实践 AI前线 20 ...

  5. nexus2 配置

    <?xml version="1.0" encoding="UTF-8"?> <!-- Licensed to the Apache Soft ...

  6. odoo配置文件内容详解

    odoo常用openerp-server.conf配置参数详解 参数 说明 用法 addons_path addons模块的查找路径,多个路径用逗号分隔 addons_path = E:\GreenO ...

  7. Oracle对于敏感数据的处理，可以采用策略(dbms_rls.add_policy)

    Oracle Policy的简单说明: Policy应用于数据行访问权限控制时,其作用简而言之,就是在查询数据表时,自动在查询结果上加上一个Where子句.假如该查询已有where子句,则在该Wher ...

  8. 解决秒杀活动高并发出现负库存（Redis）

    商城在秒杀活动开始时,同时有好多人来请求这个接口,即便做了判断库存逻辑,也难免防止库存出现超卖,造成损失 Django中的ORM本身就对数据库做了防范,但再过亿级访问也扛不住 下面利用Redis的过载 ...

  9. 唯美MACD-完全版

    前言: 自己很喜欢MACD这个指标,因为很欠缺所以就搜集的多一点,有人问,学习缠为什么还这么搜集些Macd的资料呢?因为在分析走势(或盘整背驰.或趋势背驰)的时候我的习惯使用Macd做辅助判断,所以M ...

  10. python之SQLAlchemy组件

    介绍 SQLAlchemy 是一个 ORM 框架,可以帮助我们使用面向对象的方式快速实现数据库操作. 组成部分: Engine,框架的引擎 Connection Pooling ,数据库连接池 Dia ...