Bootstrap 4 颜色(color) 您所在的位置:网站首页 html设置背景颜色的代码 Bootstrap 4 颜色(color)

Bootstrap 4 颜色(color)

2024-06-15 08:40| 来源: 网络整理| 查看: 265

颜色(color)

通过颜色传达意义、表达不同的模块,这有一系列的定义方法,包括支持链接、悬停、选中等状态相关的的样式集。

颜色

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.text-info

.text-light

.text-dark

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

使用我们提供的悬停和焦点状态(情景)样式,在链接上也能正常使用(呈现), 注意:e .text-white 、 .text-muted这两个 class样式不支持链接上使用(没有链接样式)。

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

Primary link

Secondary link

Success link

Danger link

Warning link

Info link

Light link

Dark link

Muted link

White link

背景颜色

与text文字类颜色class定义相同,链接元互会在hover状态时变暗。背景色 不要设置 color样式, 尽可能使用 .text-* 通用CSS类。

.bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white .bg-transparent .bg-primary .bg-secondary .bg-success .bg-danger .bg-warning .bg-info .bg-light .bg-dark .bg-white .bg-transparent 背景渐变

当 $enable-gradients设置为true,,则可以使用 .bg-gradient- 通用样式。 默认情况下, $enable-gradients 是被禁用的,如同下面的示例也是故意被破坏显示错误的。 这是为了在您使用Bootstrap时更加方便的进行自定义, 了解我们的Sass选项 以启用这些Class及更多。

.bg-gradient-primary .bg-gradient-secondary .bg-gradient-success .bg-gradient-danger .bg-gradient-warning .bg-gradient-info .bg-gradient-light .bg-gradient-dark 特殊性处理

有时由于其他选择器的特殊性,通用class类无法应用,这种情况下,可以通过增加一个 包裹元素并增加class样式来解决。

将意义传递给辅助技术

使用颜色来增加含义只能提供一个可视化的指示,而不会传递给辅助技术的用户,如屏幕阅读器。确保由颜色表示的信息从内容本身(例如可见文本)中显而易见,或者通过替代手段包括,例如隐藏在.sr-onlyclass类中的附加文本。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有