当前位置:首页 > 前端技术 > Bootstrap 样式之 文本颜色

Bootstrap 样式之 文本颜色

2022年08月04日 20:01:11前端技术4

Bootstrap 自定义的文本颜色 +  源码查看(测试版本3.x)

------------------------------------------------------------

先来看看bootstrap自定义的文本颜色是什么样的:

代码:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <link rel="stylesheet" href="bootstrap.css">
    <title>Bootstrap 101 Template</title>
    <style>
          p{font-size:50px;}
    </style>
    
  </head>
  <body>
              <p class="text-muted">我是muted</p>
              <p class="text-primary">我是primary</p>
              <p class="text-success">我是success</p>
              <p class="text-info">我是info</p>
              <p class="text-warning">我是warning</p>
              <p class="text-danger">我是danger</p>          
    <script src="jquery.js"></script>
    <script src="bootstrap.js"></script>
  </body>
</html>

显示效果:

                                          Bootstrap 样式之 文本颜色 _ JavaClub全栈架构师技术笔记


------------------------------------------------------------------------------------------------------------

上面就是六个不同的文本颜色,我们再来看看具体的文本颜色是多少?


打开Bootstrap.css  , 搜索text-muted:

结果如下:

Bootstrap 样式之 文本颜色 _ JavaClub全栈架构师技术笔记


这样我们就可以看出默认情况下bootstrap给出的文本颜色样式为:

.text-muted{  color: #777 ;  }

.text-primary{  color: #337ab7 ;  }

.text-success{  color: #3c763d ;  }

.text-info{  color: #31708f ;  }

.text-warning{  color: #8a6d3b ;  }

.text-danger{  color: #a94442 ;  }


我们也可以基于这些样式进行修改和添加,得到符合自己需求的样式;


作者:cvper
来源链接:https://blog.csdn.net/cvper/article/details/79398956

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17314.html

标签: 颜色设置
分享给朋友:

“Bootstrap 样式之 文本颜色” 的相关文章

qt textbrowser 设置字体颜色

qtextbrowser支持html语法来设置字体。因此使用html语法来设置字体颜色。 但是使用这个方式来设置字体颜色会有Bug。在设置某一部分字体颜色后,有概率导致后续字体颜色,都变成设置的颜色。下面是一种解决方案。 通过宏来控制字体颜色...

详解MathType中如何更改公式颜色

详解MathType中如何更改公式颜色

在MathType数学公式编辑器中可以通过更改公式颜色,起到美化、标注公式的效果。本教程将详解MathType中如何更改公式颜色。 在MathType数学公式编辑器中可以通过更改公式颜色,起到美化、标注公式的效果。本教程将详解MathType中如何更改公式颜色。...

Html设置超链接文字颜色

为了突出超链接,超链接文字通常采用与其他文字不同的颜色,超链接文字的下端还会加一条横线。网页的超链接文字有默认颜色,在默认情况下,浏览器以蓝色作为超链接文字的颜色,访问过的文字则颜色变成暗红色。在<body>标记中也可以自定义这些颜色。 基本...

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

html代码设置span字体颜色,怎么用span css设置div内部分字体颜色?

本篇文章给大家带来的内容是关于怎么用span css设置div内部分字体颜色,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 用span标签设置div内放一段文字中的部分文字字体颜色方法。 一段文字放在DIV内或P内,当我们设置div或p...

html 给div设置边框颜色代码,div边框颜色设置

html 给div设置边框颜色代码,div边框颜色设置

div边框颜色 css设置div边框颜色 使用css对div边框设置颜色是常见CSS样式设置。对div边框颜色设置说需要css单词为border。 去了解相关教程:《CSS边框》教程 一、div四条边的边框颜色设置 如果不设置边框宽度粗细...

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

HTML&CSS实验(5)---学习颜色、字体、文本格式化和盒模型的样式定义

  【实验题目】HTML&CSS实验(5) 【实验目的】学习颜色、字体、文本格式化和盒模型的样式定义。                  ----------------------个人作业,如果有后辈的作业习题一致,可以参考学习,一起交流...

sublimeText 3 使用

颜色设置: Preferences - Color Scheme 里面有众多颜色模板,可以自行选择   输入中文: http://www.cnblogs.com/afei-qwerty/p/6710235.html...

HTML中设置td的字体颜色

td中不行,但body中可以 <body text="green"> td中只可以设置背景颜色 <td bgcolor="gray"> 也可以: <td><font size="3" color="red">This is s...

10月15号

今天学习就简单的看了一下HTML颜色 HTML 颜色由一个十六进制符号来定义,这个符号由红色、绿色和蓝色的值组成(RGB)。 每种颜色的最小值是0(十六进制:#00)。最大值是255(十六进制:#FF)。 作者: 哦心有...

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

ZH奶酪:通过CSS自定义HTML中hr样式-颜色-形状

修改颜色,线条形状,粗细等... CSS代码: .zh_hr{ border:3px solid rgba(255, 255, 255, 0.50); margin-bottom: 2px; margin-top: 2px }...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。