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

.bg-五中颜色     背景颜色
.bg-warning文本红色背景
.bg-success文本绿色背景
.bg-info文本浅蓝色背景
.bg-warning文本黄色背景
.bg-primary文本绿色背景

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <title>Bootstrap 101 Template</title>

     <!-- Bootstrap -->

     <link href="css/bootstrap.css" rel="stylesheet">

     <!--[if lt IE 9]>

     <script src="js/html5shiv.min.js"></script>

     <script src="js/respond.min.js"></script>

     <![endif]-->

 </head>

 <body>

 <h3>文本相关class</h3>

 <p class="text">文本的五种颜色</p>

 <p class="text-info">文本浅蓝颜色-提示</p>

 <p class="text-warning">文本黄色-警告颜色</p>

 <p class="text-success">文本绿色-成功颜色</p>

 <p class="text-primary">文本深蓝色-警告颜色</p>

 <P class="bg">文本背景五种颜色</P>

 <P class="bg-warning">文本红色背景</P>

 <P class="bg-success">文本绿色背景</P>

 <P class="bg-info">文本浅蓝色背景</P>

 <P class="bg-warning">文本黄色背景</P>

 <P class="bg-primary">文本绿色背景</P>

 <p class="text-uppercase">jshfjskhkjdshkfhdsjkhfdkj</p><!--文本转大写形式-->

 <p class="text-lowercase">SHDJASHJDKHAJSKHDJKDASHDH</p><!--文本转小写形式-->

 <p class="text-capitalize">jsdklajslkdjkaljsdkljaskj</p><!--文本首字母与大写形式-->

 <p class="text-left">文本左对齐</p>

 <p class="text-center">文本居中对齐</p>

 <p class="text-right">文本右对齐</p>

 <p class="text-justify">文本两端对齐</p>

 <br><br>

 <script src="js/jquery-1.11.3.js"></script>

 <script src="js/bootstrap.js"></script>

 </body>

 </html>

Bootstrap-全局样式的文本颜色和背景颜色的更多相关文章

  1. 02 uni-app框架学习：设置全局样式统一每个页面的背景颜色

    1.设置全局样式可以在App.vue里面 2.在每个页面的根view 里添加一个class名叫page

  2. CSS3全览_文本+视觉+盒子+背景颜色

    CSS全览_文本+视觉+盒子+背景颜色 目录 CSS全览_文本+视觉+盒子+背景颜色 1. 文本属性 2. 视觉格式化基础 3. 内边距, 边框, 轮廓和外边距 4. 颜色, 背景和渐变 作者: ht ...

  3. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...

  4. bootstrap 全局样式设置

    HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  5. Flex中如何通过设置GridLines对象的horizontalAlternateFill样式交错显示LineSeries图表背景颜色的例子

    原文 http://blog.minidx.com/2008/11/27/1652.html 接下来的例子演示了Flex中如何通过设置GridLines对象的horizontalAlternateFi ...

  6. RadioGroup 的 RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  7. c# 设置控件的前景颜色和背景颜色

    AutoSize:设置为false取消自动计算尺寸功能,控件的大小则按照设定的Size来呈现,设置为true自动计算大小 TextAlign:设置对齐方式 // // 摘要: // 用默认的所有者运行 ...

  8. Android RadioGroup的RadioButton 选择改变字体颜色和背景颜色

    RadioGroup <RadioGroup android:id="@+id/client_charge_radiogroup" android:layout_width= ...

  9. bootstrap全局样式

    内联子标题: 显示如下: 主体副本: 显示如下: 对齐类: 显示如下: 强调类: 显示如下: 缩略语: 地址: 表格: 加一个class:“table-striped” js里面的奇数偶数行(odd) ...

随机推荐

  1. linux 记录所有用户bash操作日志

    记录所有用户登录系统的任何操作日志,以便有据可查. 1.编辑 /etc/profile文件.   1 # vim /etc/profil 2. 在其后添加如下内容   1 2 3 4 5 6 7 8 ...

  2. a buzzword to refer to modern Web technologies

    https://html.spec.whatwg.org/multipage/introduction.html#is-this-html5? HTML Living Standard — Last ...

  3. php 之数组

    PHP之array数组 PHP中的数组实际上是一个有序映射.映射是一种把values关联到keys的类型.此类型在很多方面做了优化, 因此可以把它当成真正的数组,或列表(向量),散列表(是映射的一种实 ...

  4. 单周期CPU设计的理论基础

    写在前面:本博客内容为本人老师原创,严禁任何形式的转载!本博客只允许放在博客园(.cnblogs.com),如果您在其他网站看到这篇博文,请通过下面这个唯一的合法链接转到原文! 本博客全网唯一合法UR ...

  5. c#构造函数对string类型赋初值

    public class Stu { public Stu() { //当成员属性非常多难以一一赋值时,采用本方法.当然写代码逐一成员直接赋值效率更高. AssignEmptyStringMember ...

  6. Web开发——JavaScript基础

    参考学习: MDN JavaScript:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript ECMAScript 6入门(阮一峰):htt ...

  7. [archlinux] 迁移T7从T460s到T470

    这已经不是第一次做OS的迁移了,T7早已经迁移过多台设备了.所以,其实只需要如下三步: 1.  rsync 我一直有全系统备份的习惯,T7一直会不定期的全系统rsync到Tstation上面去.所以我 ...

  8. (转载)centos7启用端口

    转载:原文地址:https://www.cnblogs.com/moxiaoan/p/5683743.html   1.firewalld的基本使用 启动: systemctl start firew ...

  9. 被监测teamviewer被检测出用于商业用途

    一.下载teamviewer的破解程序 下载链接 这个要付几块钱,本人付过,个人下载过,可以免费传给你们,可以留下邮箱,但是不一定及时回复. 二. 解压后将.exe放到对应的软件安装目录,运行,点击f ...

  10. pip技巧（加速下载和安装）

    pip技巧(linux同样) 某些开发包下载过程中会很慢,会出现timeout的情况,解决办法: 可以配置下镜像,加速下载和安装 1.python的豆瓣源地址(镜像) https://pypi.dou ...