Bootstrap4 徽章（Badges）

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

创新互联服务项目包括惠山网站建设、惠山网站制作、惠山网页制作以及惠山网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，惠山网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到惠山省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

实例

<
h1
>
测试标题
<
span

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

<
h2
>
测试标题
<
span

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

<
h3
>
测试标题
<
span

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

<
h4
>
测试标题
<
span

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

<
h5
>
测试标题
<
span

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

<
h6
>
测试标题
<
span

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

尝试一下 »

各种颜色类型的徽章

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

实例

<
span

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

<
span

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

<
span

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

<
span

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

<
span

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

<
span

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

<
span

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

<
span

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

尝试一下 »

药丸形状徽章

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

实例

<
span

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

<
span

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

<
span

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

<
span

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

<
span

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

<
span

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

尝试一下 »

徽章插入到元素内

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

实例

<
button

type
=
"
button
"

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

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

button
>

尝试一下 »

本文标题：创新互联Bootstrap4教程：Bootstrap4徽章（Badges）
本文来源：http://www.jxjierui.cn/article/dhhspsc.html