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

        <p class="text-primary">6 text-primary:亢龙有悔。</p>

        <p class="text-danger">5 text-danger:飞龙在天，利见大人。</p>

        <p class="text-warning">4 text-warning:或跃在渊，无咎。</p>

        <p class="text-info">3 text-info:君子终日乾乾，夕惕若厉,无咎。</p>

        <p class="text-success">2 text-success:见龙在田，利见大人。</p>

        <p class="text-muted">1 text-muted:潜龙勿用。</p>

    </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基础 text-muted/success... 辅助类样式 情景文本颜色的更多相关文章

  1. Bootstrap3基础 clearfix pull-left/right 辅助类样式 快速左右浮动

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

  2. Bootstrap3基础 bg-danger/info... 辅助类样式 背景文本颜色

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

  3. Bootstrap-全局样式的文本颜色和背景颜色

    .text-五种颜色   文本颜色.text-info文本浅蓝颜色-提示.text-warning文本黄色-警告颜色.text-success文本绿色-成功颜色.text-primary文本深蓝色-警 ...

  4. Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器

    一:长度及颜色单位   长度单位       px(像素)        in(英寸)       pt(点),一个标准的长度单位,1pt = 1/72in       mm(毫米)       cm ...

  5. bootstrap-响应式图片、辅助类样式

    响应式图片: <div class="container"> <!-- img-responsive 响应式图片 --> <div class=&qu ...

  6. 进击的Python【第十三章】：Web前端基础之HTML与CSS样式

    进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...

  7. [19/06/07-星期五] CSS基础_布局&定位&背景样式

    一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. jQuery 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax

    jQuery jQuery介绍 1.jQuery是一个轻量级的.兼容多浏览器的JavaScript库. 2.jQuery使用户能够更方便地处理HTML Document.Events.实现动画效果.方 ...

  9. css3种引入方式,样式与长度颜色,常用样式,css选择器

    # CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...

随机推荐

  1. mybatis10--自连接多对一查询

    查询老师对应的所有导师的信息 在09的基础上修改dao和mapper文件 public interface TeacherDao { /** * 根据老师的编号查询所有的导师信息 */ Teacher ...

  2. 剑指offer——python【第21题】栈的压入、弹出序列

    题目描述 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压 ...

  3. 个人小爱好：Operating System: three easy pieces—第6章第3小节问题2#进程间的切换

    问题2#:进程间的切换 直接执行的下一个问题是如何实现进程的切换.进程的切换按理说是挺简单的,对吧?不就是决定哪一个进程应该停止,哪一进程应该开始而已,才多大点事情啊?但,事实上这还真的有点棘手:尤其 ...

  4. InnoDB中锁的算法(1)

    Ⅰ.InnoDB锁算法的介绍 首先明确一点,锁锁住的是什么?锁锁住的是索引 Record Lock 单个行记录上的锁 Gap Lock 锁定一个范围,但不包含记录本身 Next-key Lock Ga ...

  5. 苹果审核被拒，解析奔溃日志.txt转crash文件

    1. 桌面新建一个文件夹,用来存放crash相关的东西.取名crash 2.下载苹果官方邮件里给的后缀名为 .txt 的被拒附件(这三个txt格式文件为苹果返回的崩溃日志文件),把这三个文件放在刚新建 ...

  6. 安装Linux系统

    一.环境准备 1.一个VM虚拟机镜像,一个CentOS-7镜像(注:CentOS-7和CentOS-6在命令上有很大的差别,这里选择CentOS-7版本) 二.开始安装 1.新建一个虚拟机,选择自定义 ...

  7. Cutterman - 最好用的切图工具

    Cutterman - 最好用的切图工具 http://www.cutterman.cn/zh/cutterman

  8. 017-并发编程-Condition

    一.概述 任何一个Java对象,都拥有一组监视器方法,主要包括wait().notify().notifyAll()方法,这些方法与synchronized关键字配合使用可以实现等待/通知机制.使用这 ...

  9. C++的初始化成员列表

    class CExample { public: int a; float b; //构造函数初始化列表 CExample(): a(),b(8.8) {} //构造函数内部赋值 CExample() ...

  10. python模块的学习

    # time 模块 import time print(time.time()) #当前的时间挫 #time.sleep(3) #休息3秒钟,这3秒cpu不工作的 print(time.gmtime( ...