Bootstrap5 徽章（Badges）

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了乌拉特后免费建站欢迎大家使用！

徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要将 .badge 类加上带有指定意义的颜色类 (如 .bg-secondary) 添加到 元素上即可。 徽章可以根据父元素的大小的变化而变化:

实例

<
h1
>
测试标题
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h1
>

<
h2
>
测试标题
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h2
>

<
h3
>
测试标题
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h3
>

<
h4
>
测试标题
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h4
>

<
h5
>
测试标题
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h5
>

<
h6
>
测试标题
<
span

class
=
"
badge bg-secondary
"
>
New
span
>
h6
>

尝试一下 »

各种颜色类型的徽章

以下列出了所有颜色类型的徽章:

实例

<
span

class
=
"
badge bg-primary
"
>
主要
span
>

<
span

class
=
"
badge bg-secondary
"
>
次要
span
>

<
span

class
=
"
badge bg-success
"
>
成功
span
>

<
span

class
=
"
badge bg-danger
"
>
危险
span
>

<
span

class
=
"
badge bg-warning
"
>
警告
span
>

<
span

class
=
"
badge bg-info
"
>
信息
span
>

<
span

class
=
"
badge bg-light
"
>
浅色
span
>

<
span

class
=
"
badge bg-dark
"
>
深色
span
>

尝试一下 »

药丸形状徽章

使用 .rounded-pill 类来设置药丸形状徽章:

实例

<
span

class
=
"
badge rounded-pill bg-default
"
>
默认
span
>

<
span

class
=
"
badge rounded-pill bg-primary
"
>
主要
span
>

<
span

class
=
"
badge rounded-pill bg-success
"
>
成功
span
>

<
span

class
=
"
badge rounded-pill bg-info
"
>
信息
span
>

<
span

class
=
"
badge rounded-pill bg-warning
"
>
警告
span
>

<
span

class
=
"
badge rounded-pill bg-danger
"
>
危险
span
>

尝试一下 »

徽章插入到元素内

以下实例将徽章嵌入到按钮内：

实例

<
button

type
=
"
button
"

class
=
"
btn btn-primary
"
>
Messages
<
span

class
=
"
badge bg-light
"
>
4
span
>

button
>

尝试一下 »

网站栏目：创新互联Bootstrap5教程：Bootstrap5徽章（Badges）
分享网址：http://www.shufengxianlan.com/qtweb/news9/56059.html

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

广告

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