Bootstrap4 徽章(Badges)

Bootstrap 4 的徽章(Badges)组件是一种小型的用于计数和打标签的组件。徽章组件通过使用相对字体大小和 em 单位来实现缩放,以匹配其直接父元素的大小。这意味着徽章可以根据父元素的大小变化而变化,提供了很好的灵活性。

在 Bootstrap 4 中,创建徽章非常简单。只需要将 .badge 类加上带有指定意义的颜色类(如 .badge-secondary)添加到 <span> 元素上即可。例如,要创建一个次要颜色的徽章,可以使用 <span class="badge badge-secondary">New</span>

徽章组件可以作为链接或按钮的一个组成部分,以提供计数功能。例如,在一个按钮内部使用徽章来显示通知数量:

html 复制代码
<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

Bootstrap 4 还支持药丸形状的徽章。要创建药丸形状的徽章,只需要在徽章类中添加 .badge-pill 类。例如,<span class="badge badge-pill badge-primary">主要</span>

值得注意的是,徽章组件可能会给使用屏幕阅读器及类似辅助技术的用户带来困惑。虽然徽章通过样式传达了有关其用途的视觉提示,但视觉受限的用户则只能获取到徽章组件内所包含的文本内容。因此,在使用徽章时,需要考虑上下文是否清晰,以便这些用户能够正确理解徽章的含义。

以下是一些徽章的颜色类型示例:

  • 主要:<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>

这些徽章可以根据需要应用于不同的元素和场景中,以增强用户界面的视觉效果和功能性【0†source】【1†source】【2†source】【3†source】。

相关推荐
我叫小白菜8 分钟前
【Java_EE】单例模式、阻塞队列、线程池、定时器
java·开发语言
狐凄14 分钟前
Python实例题:基于 Python 的简单聊天机器人
开发语言·python
weixin_446122461 小时前
JAVA内存区域划分
java·开发语言·redis
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
QuantumStack2 小时前
【C++ 真题】P1104 生日
开发语言·c++·算法
whoarethenext2 小时前
使用 C++/OpenCV 和 MFCC 构建双重认证智能门禁系统
开发语言·c++·opencv·mfcc
代码的奴隶(艾伦·耶格尔)3 小时前
后端快捷代码
java·开发语言
Jay_5154 小时前
C++多态与虚函数详解:从入门到精通
开发语言·c++
路来了4 小时前
Python小工具之PDF合并
开发语言·windows·python
xiaolang_8616_wjl4 小时前
c++文字游戏_闯关打怪
开发语言·数据结构·c++·算法·c++20