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

?

内容 参数
??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="bg-danger">bg-danger:道可道,非常道;名可名,非常名。</p>
        <p class="bg-info">bg-info:无名,天地之始;有名,万物之母。</p>
        <p class="bg-warning">bg-warning:故常无欲,以观其妙;常有欲,以观其徼。</p>
        <p class="bg-success">bg-success:此两者同出而异名,同谓之玄。</p>
        <p class="bg-primary">bg-primary:玄之又玄,众妙之门。</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(三思而后行)!

原文地址:https://www.cnblogs.com/kemingli/p/10545336.html

时间: 2024-10-11 08:01:47

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

Bootstrap3基础 text-muted/success... 辅助类样式 情景文本颜色

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

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

响应式图片: <div class="container"> <!-- img-responsive 响应式图片 --> <div class="row"> <div class="col-lg-2"> <img src="user_photo.png" class="img-responsive"> </div> </div&g

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

图片,辅助类样式

图片样式 .img-responsive: 给图片加该样式可实现响应式布局 .center-block:图片居中样式, 图片形状样式:.img-rounded(圆角图片) , .img-circle(圆形图片),.img-thumbnail(边框圆角) 辅助类样式 文本颜色:.text-muted(柔和类)  .text-primary .text-success  .text-info . text-warning .text-danger 背景颜色:.bg-primary  .bg-succ

HTML基础教程(13)——HTML背景--

好的背景使站点看上去特别棒. 实例 搭配良好的背景和颜色 一个背景颜色和文字颜色搭配良好的例子,使页面中的文字易于阅读. 搭配得不好的背景和颜色 一个背景颜色和文字颜色搭配得不好的例子,使页面中的文字难于阅读. (可以在本页底端找到更多实例.) 背景(Backgrounds) <body> 拥有两个配置背景的标签.背景可以使颜色或者图像. 背景颜色(Bgcolor) 背景颜色属性将背景设置为某种颜色.属性值可以是十六进制数.RGB 值或颜色名. <body bgcolor="#

Java Script基础(十) 访问样式表

Java Script基础(十) 访问样式表 动态控制样式表 在JavaScript中,有两种方式可以动态的改变样式属性,一种是使用style属性,另一种是使用样式的className属性.另外控制元素隐藏和显示使用display属性. 1.使用sytle属性 语法: 元素.style.样式属性="值"; 在JavaScript中使用CSS样式与在html中使用CSS少有不同,由于JavaScript中的-表示减号,因此如果样式属性名称中带有"-"则要省去,后面首字

CSS样式-背景与文本

背景样式: 1)背景色 可以使用background-color属性为元素设置背景色,这个属性接受任何合法的颜色值.默认值为transparent,有透明的意思. 2)背景图像 要把图像放入背景中,使用background-image属性.默认值为none. 3)背景重复 如果需要背景图像在页面上平铺,使用background-repeat属性.属性值 repeat 导致图像在水平垂直方向上都平铺,repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat

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

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

CSS3——背景 文本 字体 链接 列表样式 表格

背景 background-color rgb(255,0,0,1)      最后一个值表示透明度,范围是 0--1 background-image 默认平铺重复显示 background-repeat 在页面的水平或者垂直方向平铺 background-attachment 是否固定或者随着页面的其余部分滚动 background-position 位置 文本 颜色 body {color:red;} h1 {color:#00ff00;} h2 {color:rgb(255,0,0);}