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】。

相关推荐
liulilittle8 分钟前
深度剖析:OPENPPP2 libtcpip 实现原理与架构设计
开发语言·网络·c++·tcp/ip·智能路由器·tcp·通信
88号技师15 分钟前
2025年6月一区-田忌赛马优化算法Tianji’s horse racing optimization-附Matlab免费代码
开发语言·算法·matlab·优化算法
勤奋的知更鸟21 分钟前
Java 编程之模板方法模式
java·开发语言·模板方法模式
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
-凌凌漆-2 小时前
【Qt】QStringLiteral 介绍
开发语言·qt
程序员爱钓鱼2 小时前
Go语言项目工程化 — 常见开发工具与 CI/CD 支持
开发语言·后端·golang·gin
军训猫猫头3 小时前
1.如何对多个控件进行高效的绑定 C#例子 WPF例子
开发语言·算法·c#·.net
真的想上岸啊3 小时前
学习C++、QT---18(C++ 记事本项目的stylesheet)
开发语言·c++·学习
明天好,会的3 小时前
跨平台ZeroMQ:在Rust中使用zmq库的完整指南
开发语言·后端·rust
丁劲犇4 小时前
用 Turbo Vision 2 为 Qt 6 控制台应用创建 TUI 字符 MainFrame
开发语言·c++·qt·tui·字符界面·curse