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

    <!--

        第一次时，table中忘记写class="table"了，效果没出来

        状态可以设置在tr或td上

        bootstrap框架，大小300K，以后可以研究研究

        争取把它拆解开来，分成多个细小的功能实现

        -->

    <div class="container">

        <table class="table">

            <tr class="warning">

                <td>warning</td>

            </tr>

            <tr class="active">

                <td>active</td>

            </tr>

            <tr class="info">

                <td>info</td>

            </tr>

            <tr class="success">

                <td>success</td>

            </tr>

            <tr class="danger">

                <td>danger</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基础 warning/active... 表格的状态类（不同的背景色）的更多相关文章

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

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

  2. Bootstrap3 表格-状态类

    通过这些状态类可以为行或单元格设置颜色. .active---鼠标悬停在行或单元格上时所设置的颜色 .success--–标识成功或积极的动作 .info----标识普通的提示信息或动作 .warni ...

  3. bootstrap表格鼠标悬停与状态类

    今天在学习的过程中遇到在表格一章中 鼠标悬停 与 状态类 无效的问题,是因为在css文件中默认颜色都为白色造成的,解决方式如下: 在bootstrap文件夹中找到bootstrap.css文件(我的版 ...

  4. Bootstrap基础学习(一)—表格与按钮

    一.Bootstrap 概述      Bootstrap 是由 Twitter 公司(全球最大的微博)的两名技术工程师研发的一个基于HTML.CSS.JavaScript 的开源框架.该框架代码简洁 ...

  5. Java基础-进程与线程之Thread类详解

    Java基础-进程与线程之Thread类详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.进程与线程的区别 简而言之:一个程序运行后至少有一个进程,一个进程中可以包含多个线程 ...

  6. JAVA基础语法：函数(方法)、类和对象（转载）

    4.JAVA基础语法:函数(方法).类和对象 函数 在java中函数也称为方法,是一段具备某种功能的可重用代码块. 一个函数包括这几部分: 函数头 函数头包括函数访问修饰符,函数返回值类型, 函数名, ...

  7. Java基础复习笔记系列 五 常用类

    Java基础复习笔记系列之 常用类 1.String类介绍. 首先看类所属的包:java.lang.String类. 再看它的构造方法: 2. String s1 = “hello”: String ...

  8. C#基础第八天-作业答案-设计类-面向对象方式实现两个帐户之间转账

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. Java基础-IO流对象之字符类（FileWrite与FileReader）

    Java基础-IO流对象之字符类(FileWrite与FileReader) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.常见编码简介 1>ASCII 我们知道计算机是 ...

随机推荐

  1. 数据交互axios的用法

    参考: https://www.cnblogs.com/zhouyangla/p/6753673.html

  2. poj 3126 Prime Path（搜索专题）

    Prime Path Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20237   Accepted: 11282 Desc ...

  3. python接口自动化测试（七）unittest 生成测试报告

    用例的管理问题解决了后,接下来要考虑的就是报告我问题了,这里生成测试报告主要用到 HTMLTestRunner.py 这个模块,下面简单介绍一下如何使用: 一.下载HTMLTestRunner下载: ...

  4. springboot+mybatis+druid数据库连接池

    参考博客https://blog.csdn.net/liuxiao723846/article/details/80456025 1.先在pom.xml中引入druid依赖包 <!-- 连接池 ...

  5. py三个面试小问题

    1.是否遇到过Python的模块间循环引用的问题,如何避免它? 这是代码结构设计的问题,模块依赖和类依赖,如果老是觉得碰到循环引用可能的原因有几点: a.可能是模块的分界线划错地方了 b.可能是把应该 ...

  6. Cartographer源码阅读(9)：图优化的前端——闭环检测

    约束计算 闭环检测的策略:搜索闭环,通过匹配检测是否是闭环,采用了分支定界法. 前已经述及PoseGraph的内容,此处继续.位姿图类定义了pose_graph::ConstraintBuilder ...

  7. python 容器类型数据 (str list tuple set dict)

    # ###容器类型数据(str list tuple set dict) var1 = "今天心情非常美丽" var2 = [1,2,3,4] var3 = ("黄将用& ...

  8. python进阶之 进程&线程区别

    1.进程创建方式 import time import os from multiprocessing import Process def func (): time.sleep(1) print( ...

  9. [js]设计模式小结&对原型的修改

    js设计模式小结 工厂模式/构造函数--减少重复 - 创建对象有new - 自动创建obj,this赋值 - 无return 原型链模式 - 进一步去重 类是函数数据类型,每个函数都有prototyp ...

  10. 467A

    #include <stdio.h> int main() { int n; int p, q; int rooms=0; scanf("%d", &n); i ...