鱼C论坛

 找回密码
 立即注册
查看: 916|回复: 11

[技术交流] 11 - 颜色工具类

[复制链接]
发表于 2023-7-5 19:17:47 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
0_3.png

Bootstrap定义了一套主题色,可以针对文本、背景和链接设置相应的颜色。

规则如下:
.text-{color}    /* 设置文本颜色 */
.bg-{color}      /* 设置背景颜色 */
.link-{color}    /* 设置链接颜色 *
color 可取的值是 primary、secondary、success、danger、warning、info、light 和 dark。

以背景颜色为例实操:
    <div class="bg-primary text-white">.bg-primary</div>
    <div class="bg-secondary text-white">.bg-secondary</div>
    <div class="bg-success text-white">.bg-success</div>
    <div class="bg-danger text-white">.bg-danger</div>
    <div class="bg-warning text-dark">.bg-warning</div>
    <div class="bg-info text-dark">.bg-info</div>
    <div class="bg-light text-dark">.bg-light</div>
    <div class="bg-dark text-white">.bg-dark</div>
效果:

2023-07-05_18-14-21.png

以上这种颜色命名规则贯穿整个 Bootstrap,它使用语义化的名称。

包括主色(primary)、次色(secondary)以及各种提示色。

各种提示色可分别代表不同的情景,包括操作成功(success)、危险操作(danger)、警告(warning)、信息(info)、浅色(light)和深色(dark)。

在后续讲解组件时还会遇到相关内容,例如按钮和警告框组件,也使用了相同的颜色体系。

此外,链接的颜色 link-* 还针对 :hover 和 :focus 状态进行了设置。

背景颜色还有两个常用的工具类,即白色背景和透明背景工具类,相应的颜色值定义如下:
.bg-white {
    background-color: #fff!important;3 }

.bg-transparent {
    background-color: transparent!important;}
对于作用于文本的颜色还有几个额外的工具类。

包括浅色文字(text-muted)、白色文字(text-white)、50%透明黑色(text-black-50)以及50%透明白色(text-white-50)工具类,相应的颜色值定义如下:
.text-muted {
    color: #6c757d!important;}
.text-white {
    color: #fff!important;}
.text-black-5{
    color: rgba(0,0,0,.5)!important;}
.text-white-50 {
    color: rgba(255,255,255,.5)!important;}
在 Bootstrap 的工具类的相关代码中,都会加上!important,以防止自身被其他样式覆盖。

这位鱼油,如果喜欢本帖子,请订阅>>> 专辑 <<<(不喜欢更要订阅


官方 Web 课程:

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-7-5 19:36:14 | 显示全部楼层

回帖奖励 +2 鱼币

thanx for sharing:
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-5 19:36:50 | 显示全部楼层

回帖奖励 +2 鱼币

最近遇到了麻烦,哎
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-5 21:14:27 | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-7-5 21:14:37 | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-5 21:38:16 | 显示全部楼层

thanx for sharing:
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-5 22:00:39 | 显示全部楼层

回帖奖励 +2 鱼币

感谢分享!
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-5 22:43:46 | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-7-5 23:48:46 | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-7-6 08:04:08 | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-7-6 09:25:15 | 显示全部楼层

回帖奖励 +2 鱼币

顶一下,受教了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-7-6 12:36:35 From FishC Mobile | 显示全部楼层

回帖奖励 +2 鱼币

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-24 11:17

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表