HTML 基础 · 12/88
1. 微信小程序 bindtap 和 catchtap 的区别 2. Bootstrap 徽章 3. Bootstrap 按钮下拉菜单 4. Bootstrap 按钮组 5. Bootstrap 按钮激活与禁用 6. Bootstrap 文档类型声明 7. Bootstrap 下拉菜单 8. Bootstrap 表单帮助文本 9. Bootstrap 水平表单 10. Bootstrap 输入框组 11. Bootstrap 超大屏幕 12. Bootstrap 标签 13. Bootstrap 导航类型 14. Bootstrap 分页 15. Bootstrap 响应式表格 16. Bootstrap 垂直表单创建 17. 浏览器乱码问题及解决方案 18. Canvas 标签属性与 CSS 样式设置宽高的区别 19. Canvas、SVG、WebGL 对比 20. 网页验证码的作用 21. 前端跨页面通信方法 22. 圆形可点击区域实现 23. 浏览器多标签页通信方案 24. CSSOM 树和 DOM 树的解析时机 25. 设备的 DPR 是否可变 26. 禁用 a 标签的跳转和定位 27. DOM 和 BOM 的区别 28. DOM 发展历程 29. DOCTYPE 与文档模式 30. DNS 预解析优化网页加载速度 31. DOM 树的理解 32. Drag API 拖拽事件 33. 前端 SEO 优化要点 34. 标题与副标题的实现 35. HTML 元素分类 36. HTML 全局属性 37. HTML 页面渲染过程 38. HTML 语义化 39. HTML 语义化 40. HTML5 DOCTYPE 声明简化原因 41. HTML5 离线存储原理与使用 42. HTML5 新特性 43. HTML5 移除的元素 44. IconFont 字体图标 45. iframe 的优缺点与通信 46. 图片点击下载而非预览 47. HTML 和 CSS 中的图片加载与渲染规则 48. 浏览器预览待上传图片 49. img 标签 title 和 alt 的区别 50. input 标签触发拍照功能 51. 控制 input 输入框字数 52. img 的 srcset 属性 53. 禁止 input 显示历史记录 54. input 上传多个文件 55. JS 和 CSS 对 DOM 树构建的影响 56. label 标签的作用 57. link 和 @import 的区别 58. Meta 标签常用属性 59. Meta 标签自动刷新跳转 60. 小程序的双线程架构 61. 小程序页面间传递数据的方法 62. 小程序为什么没有 DOM API 63. 微信小程序的优劣势 64. Node 和 Element 的关系 65. 页面生命周期事件：DOMContentLoaded、load、beforeunload、unload 66. 渐进增强与优雅降级 67. 渐进式 JPEG 图片格式 68. PV 和 UV 的区别 69. Script 标签 defer 和 async 70. 实现点击回到顶部功能 71. script 标签能否使用自闭合语法 72. src 与 href 的区别 73. SSG 静态网站生成 74. style 标签位置对页面渲染的影响 75. 从输入 URL 到页面显示的过程 76. Web 标准与可访问性理解 77. 网页常用图片格式 78. 网页常用图片格式 79. Web 标准与 W3C 标准 80. WebSocket 低版本浏览器兼容方案 81. Web Worker 的作用与场景 82. 微信小程序事件传值 83. 微信小程序文件结构 84. 微信小程序的架构 85. 微信小程序原理 86. 页面白屏时间优化 87. 小程序 WXSS 与 CSS 的区别 88. XHTML 与 HTML 的区别

Bootstrap 标签

Bootstrap 中显示标签的 class 用法

问题

Bootstrap 中显示标签的 class 是什么？如何使用不同样式的标签？

解答

Bootstrap 3 中使用 .label

<!-- Bootstrap 3 标签 -->
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Bootstrap 4/5 中使用 .badge

Bootstrap 4 开始，.label 被 .badge 取代。

<!-- Bootstrap 5 标签 -->
<span class="badge vqj0f">Primary</span>
<span class="badge bk6r6">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

胶囊形状标签

<!-- 圆角胶囊标签 -->
<span class="badge rounded-pill vqj0f">Pill Badge</span>
<span class="badge rounded-pill bg-success">Success</span>

按钮中的标签（计数器）

<!-- 按钮内嵌标签显示数量 -->
<button type="button" class="btn btn-primary">
  消息 <span class="badge bg-light text-dark">4</span>
</button>

<button type="button" class="btn btn-primary position-relative">
  收件箱
  <!-- 定位标签 -->
  <span class="position-absolute v765i mlkxf translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

完整示例

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
  <h5>基础标签</h5>
  <span class="badge vqj0f">Primary</span>
  <span class="badge bg-success">Success</span>
  <span class="badge bg-danger">Danger</span>
  
  <h5 class="yj2p4">胶囊标签</h5>
  <span class="badge rounded-pill vqj0f">Pill</span>
  <span class="badge rounded-pill bg-success">Pill</span>
  
  <h5 class="yj2p4">按钮标签</h5>
  <button class="btn btn-primary">
    通知 <span class="badge bg-light text-dark">5</span>
  </button>
</body>
</html>

关键点

  • Bootstrap 3 使用 .label + .label-* 类
  • Bootstrap 4/5 使用 .badge + .bg-* 类
  • 胶囊形状添加 .rounded-pill 类
  • 浅色背景需要添加 .text-dark 保证文字可读
  • 标签常用于按钮内显示计数或状态标识
上一章
Bootstrap 超大屏幕
Bootstrap Jumbotron 组件的作用和使用方法
 下一章
Bootstrap 导航类型
Bootstrap 中常用的导航组件及使用方法

目录