- Bootstrap从入门到项目实战
- 李爱玲
- 259字
- 2021-03-24 20:36:56
5.2.1 文本颜色
Bootstrap提供了一些有代表意义的文本颜色类,说明如下。
■ .text-primary:蓝色。
■ .text-secondary:灰色。
■ .text-success:浅绿色。
■ .text-danger:浅红色。
■ .text-warning:浅黄色。
■ .text-info:浅蓝色。
■ .text-light:浅灰色(白色背景上看不清楚)。
■ .text-dark:深灰色。
■ .text-muted:灰色。
■ .text-white:白色(白色背景上看不清楚)。
在下面示例中,设置.text-light类和.text-white类,同时还需要添加相应的背景色,否则是看不见的。这里添加了.bg-dark类,背景显示为深灰色。
【例5.8】文本颜色类示例。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P77_2434.jpg?sign=1739179242-6M3crBkkgmJn5HpjlreS85yBtjNAZtvu-0-13885f6897700d7e49cc8058eed789e9)
在IE 11浏览器中运行结果如图5-9所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P77_2436.jpg?sign=1739179242-RsfFHBulGFSQ0pRUxZleVtrOXB0SA6od-0-0b2e8fcc270c0842570ee72a462ce126)
图5-9 文本颜色类效果
Bootstrap 4中还有两个特别的颜色类text-black-50和text-white-50,CSS样式代码如下:
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P77_2440.jpg?sign=1739179242-wXT6rPAxMUhrJErGotyhwWYtL464ZVEQ-0-93aac506079f13fa697cb05daa4fffa1)
这两个类分别设置文本为黑色和白色,并设置透明度为0.5。