![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=1738985697-13V7V39n6EV5bmTRXR4C6PkOtxLvReJx-0-dec822716ff0f632f13d6598e90face7)
在IE 11浏览器中运行结果如图5-9所示。
![](https://epubservercos.yuewen.com/84690B/15936052304963006/epubprivate/OEBPS/Images/Figure-P77_2436.jpg?sign=1738985697-9NI7lq3uIOmWBqloaMMSrPDa8x9pNFyw-0-4f97669e46314b017044e75af995bd5c)
图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=1738985697-TFmGslczj14hsWJ2Yunh7gXX5phmqKtf-0-cb8a83140c4782500b63a10ab598401f)
这两个类分别设置文本为黑色和白色,并设置透明度为0.5。