Getting startedAccessibility（无障碍）Browsers and devices（浏览器和设备）Build tools（构建工具）Contents（内容）Download（下载）JavaScriptTheming Bootstrap（主题Bootstrap）WebpackComponents: AlertsAlerts（警报）Components: BadgesBadges（徽章）Components: BreadcrumbBreadcrumbComponents: Button groupButton group（按钮组）Components: ButtonsButtons（按钮）Components: CardsComponents: CarouselCards（卡）Carousel（圆盘传送带）Components: CollapseCollapse（折叠）Components: DropdownsDropdowns（下拉菜单）Components: FormsForms（表单）Components: Input groupInput group（输入群组）Components: Input groupJumbotron（广告大屏幕）Components: List groupList group（列表组）Components: ModalModal（互动视窗）Components: NavbarNavbar（导航栏）Components: NavsNavs（导航栏）Components: PaginationPagination（分页）Components: PopoversPopovers（弹出框）Components: ProgressProgress（进度条）Components: ScrollspyScrollspy（滚动监听）Components: TooltipsTooltips（提示工具）ContentCode（代码）Figures（图片区）Images（图片）Reboot（重置）Tables（表格）Typography（排版）LayoutGrid（网格）Layout（布局）Media object（多媒体对象）Utilities for layout（排版通用类别）MigrationMigrating to v4（迁移到v4）UtilitiesBorders（边框）Clearfix（清除浮动）Close icon（关闭图标）Colors（颜色）Display property（显示属性）Embeds（内嵌）Flex（弹性）Float（浮动）Image replacement（图像替换）Position（位置）Screenreaders（荧幕阅读器）Sizing（尺寸）Spacing（间隔）Text（文本）Vertical alignment（垂直对齐）Visibility（能见度）
©
本文档使用
php.cn手册 发布
文字
徽章的文档和示例，我们的小计数和标签组件。
示例
使用相对字体大小与直接父元素的大小相匹配的徽章比例em各单位。
<h1>Example heading <span class="badge badge-secondary">New</span></h1><h2>Example heading <span class="badge badge-secondary">New</span></h2><h3>Example heading <span class="badge badge-secondary">New</span></h3><h4>Example heading <span class="badge badge-secondary">New</span></h4><h5>Example heading <span class="badge badge-secondary">New</span></h5><h6>Example heading <span class="badge badge-secondary">New</span></h6>
Badges（徽章）可以用作链接或按钮的一部分来提供计数器。
<button type="button" class="btn btn-primary"> Notifications <span class="badge badge-light">4</span></button>
请注意，取决于如何使用它们，徽章可能会让屏幕阅读器和类似辅助技术的用户感到困惑。虽然徽章造型提供了一个关于其目的的视觉提示，但这些用户只会看到徽章的内容。根据具体情况，这些徽章可能看起来像是句子，链接或按钮末尾的随机附加单词或数字。
除非上下文清楚（与“通知”示例一样，在了解“4”是通知数量的情况下），请考虑在其他上下文中添加一段视觉隐藏的附加文本。
<button type="button" class="btn btn-primary"> Profile <span class="badge badge-light">9</span> <span class="sr-only">unread messages</span></button>
环境变化
添加下面提到的任何修饰符类来更改徽章的外观。
<span class="badge badge-primary">Primary</span><span class="badge badge-secondary">Secondary</span><span class="badge badge-success">Success</span><span class="badge badge-danger">Danger</span><span class="badge badge-warning">Warning</span><span class="badge badge-info">Info</span><span class="badge badge-light">Light</span><span class="badge badge-dark">Dark</span>
将意义传递给辅助技术
使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息或者来自内容本身（例如可见文本），或者通过其他方式包含，例如隐藏在.sr-only类中的其他文本。
丸徽章（Pill badges）
使用.badge-pill修饰符类可以使徽章更圆润（使用更大border-radius和更多的水平线padding）。如果您错过了 v3 的徽章，这很有用。
<span class="badge badge-pill badge-primary">Primary</span><span class="badge badge-pill badge-secondary">Secondary</span><span class="badge badge-pill badge-success">Success</span><span class="badge badge-pill badge-danger">Danger</span><span class="badge badge-pill badge-warning">Warning</span><span class="badge badge-pill badge-info">Info</span><span class="badge badge-pill badge-light">Light</span><span class="badge badge-pill badge-dark">Dark</span>
链接
在<a>元素上使用环境.badge-*类可快速提供悬停和焦点状态的可操作徽章。
<a href="#" class="badge badge-primary">Primary</a><a href="#" class="badge badge-secondary">Secondary</a><a href="#" class="badge badge-success">Success</a><a href="#" class="badge badge-danger">Danger</a><a href="#" class="badge badge-warning">Warning</a><a href="#" class="badge badge-info">Info</a><a href="#" class="badge badge-light">Light</a><a href="#" class="badge badge-dark">Dark</a>