Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具
Bootstrap4 徽章 ( Badges )
徽章 ( Badges )主要用于突出显示新的或未读的项，Bootstrap 提供了 .badge css 用于创建徽章
基本的徽章
徽章一般使用 <span> 元素创建，同时可以添加有意义的颜色类 ( 如 .badge-secondary )
徽章会根据父元素的大小的变化而变化
<h1>Python <span class="badge badge-secondary">3.5.6</span></h1>
<h2>php <span class="badge badge-secondary">7.1.2</span></h2>
<h3>Perl <span class="badge badge-secondary">6</span></h3>
<h4>Java <span class="badge badge-secondary">1.8.1</span></h4>
<h5>Scala <span class="badge badge-secondary">2.1.1</span></h5>
<h6>Kotlin <span class="badge badge-secondary">1.12.1</span></h6>
各种颜色类型的徽章
.badges-* CSS 类可以设置各种状态 ( 颜色 ) 的徽章
<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 CSS 类可以设置圆角徽章
<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>
<button type="button" class="btn btn-primary">
微信 <span class="badge badge-light">4</span>
</button>