Bootstrap5 颜色

Bootstrap 5 提供了一些有代表意义的颜色类：.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body (默认颜色，为黑色) and .text-light:

实例

<
div

class
=
"
container
"
>

<
h2
>
代表指定意义的文本颜色
h2
>

<
p

class
=
"
text-muted
"
>
柔和的文本。
p
>

<
p

class
=
"
text-primary
"
>
重要的文本。
p
>

<
p

class
=
"
text-success
"
>
执行成功的文本。
p
>

<
p

class
=
"
text-info
"
>
代表一些提示信息的文本。
p
>

<
p

class
=
"
text-warning
"
>
警告文本。
p
>

<
p

class
=
"
text-danger
"
>
危险操作文本。
p
>

<
p

class
=
"
text-secondary
"
>
副标题。
p
>

<
p

class
=
"
text-dark
"
>
深灰色文字。
p
>

<
p

class
=
"
text-body
"
>
默认颜色，为黑色。
p
>

<
p

class
=
"
text-light
"
>
浅灰色文本（白色背景上看不清楚）。
p
>

<
p

class
=
"
text-white
"
>
白色文本（白色背景上看不清楚）。
p
>

div
>

尝试一下 »

可以设置文本颜色透明度为 50% ，使用 .text-black-50 或 .text-white-50 类:

实例

<
p

class
=
"
text-black-50
"
>
透明度为 50% 的黑色文本，背景为白色。
p
>

<
p

class
=
"
text-white-50 bg-dark
"
>
透明度为 50% 的白色文本，背景为黑色。
p
>

尝试一下 »

在链接中使用

实例

<
div

class
=
"
container
"
>

<
h2
>
文本颜色
h2
>

<
p
>
鼠标移动到链接。
p
>

<
a

href
=
"
#
"

class
=
"
text-muted
"
>
柔和的链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-primary
"
>
主要链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-success
"
>
成功链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-info
"
>
信息文本链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-warning
"
>
警告链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-danger
"
>
危险链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-secondary
"
>
副标题链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-dark
"
>
深灰色链接。
a
>

<
a

href
=
"
#
"

class
=
"
text-light
"
>
浅灰色链接。
a
>

div
>

尝试一下 »

背景颜色

提供背景颜色的类有: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark 和 .bg-light。

注意背景颜色不会设置文本的颜色，在一些实例中你需要与 .text-* 类一起使用。

实例

<
div

class
=
"
container
"
>

<
h2
>
背景颜色
h2
>

<
p

class
=
"
bg-primary text-white
"
>
重要的背景颜色。
p
>

<
p

class
=
"
bg-success text-white
"
>
执行成功背景颜色。
p
>

<
p

class
=
"
bg-info text-white
"
>
信息提示背景颜色。
p
>

<
p

class
=
"
bg-warning text-white
"
>
警告背景颜色
p
>

<
p

class
=
"
bg-danger text-white
"
>
危险背景颜色。
p
>

<
p

class
=
"
bg-secondary text-white
"
>
副标题背景颜色。
p
>

<
p

class
=
"
bg-dark text-white
"
>
黑色背景颜色。
p
>

<
p

class
=
"
bg-light text-dark
"
>
浅灰背景颜色。
p
>

div
>

尝试一下 »

当前题目：创新互联Bootstrap5教程：Bootstrap5颜色
本文网址：http://www.shufengxianlan.com/qtweb/news13/390563.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联