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