内容 参数
  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. R - Dividing 多重背包

    来源poj1059 Marsha and Bill own a collection of marbles. They want to split the collection among thems ...

  2. Nginx配置跨域请求 CORS

    当出现403跨域错误的时候 No 'Access-Control-Allow-Origin' header is present on the requested resource,需要给Nginx服 ...

  3. poj 1556

    哦天哪这个萨比提又浪费了我好几个小时. 我们在check的时候只考虑严格相交就行了,想了很久才注意到这一点. 然后就建图跑最短路,over. #include <cstdio> #incl ...

  4. 21.react 组件通信

    状态属性可以修改 this.setState()中可以写对象,也可以写方法 <script type="text/babel"> class Test extends ...

  5. mui APP与服务器之间的交互原理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 20175320 2018-2019-2 《Java程序设计》第2周学习总结

    20175320 2018-2019-2 <Java程序设计>第2周学习总结 教材学习内容总结 本周学习了教材的第二章及第三章的内容.在这两章中介绍了Java编程中的基本数据类型与数组以及 ...

  7. Codeforces 1090A - Company Merging - [签到水题][2018-2019 Russia Open High School Programming Contest Problem A]

    题目链接:https://codeforces.com/contest/1090/problem/A A conglomerate consists of n companies. To make m ...

  8. python-----编写接口，使用postman与soapiu与jemeter访问调用

    实例:自己写一个注册接口 输入用户名.密码.验证码,当满足注册将密码进行md5加密. 场景 接口返回参数 提示 用户名存在 2000 exit 用户已存在 密码与验证码不相等 3000 wrong 密 ...

  9. (在命名空间 public 中)存在冲突

    解决方案: http://www.wastedpotential.com/flash-as3-stop-using-automatically-declare-stage-instances/ 修复错 ...

  10. PrimeNG之FileUpload

    --文件上传是一个支持拖放,多文件上传,自动上传,进度跟踪和验证的上传. Import import {FileUploadModule} from 'primeng/primeng'; Gettin ...