![Bootstrap从入门到项目实战](https://wfqqreader-1252317822.image.myqcloud.com/cover/95/27738095/b_27738095.jpg)
上QQ阅读APP看书,第一时间看更新
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=1738913228-0gJKa9vQV7bxgmOK4dP9T6QWxtDUtsKT-0-42f236ef6b30bcc3173061ff09532689)
在IE 11浏览器中运行结果如图5-9所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P77_2436.jpg?sign=1738913228-f7tKBG6A8aXCfBpuIBXttepundj6Y6AJ-0-54dd66e092cc64130d8aa1d1fa07fff1)
图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=1738913228-77zuIHLondEc2GtLDZzdjsj7iihqfh83-0-9568beddb17fdd3750b4a054b8357c13)
这两个类分别设置文本为黑色和白色,并设置透明度为0.5。