引导徽章 - CSS

简介

引导徽章是网站和应用程序中常用于突出显示状态的小图标。这些小图标可以用来表示用户的级别、成就、认证状态等等。CSS可以很容易地创建引导徽章并提供各种应用方式。

CSS样式

引导徽章的样式包括背景颜色、字体颜色、边框颜色和形状。以下是创建引导徽章的CSS样式:

.badge {
  display: inline-block;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
  padding: 0 10px;
  min-width: 50px;
  height: 24px;
  border-radius: 12px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.primary {
  background-color: #007bff;
  color: #fff;
  border: 1px solid #007bff;
}

.secondary {
  background-color: #6c757d;
  color: #fff;
  border: 1px solid #6c757d;
}

.success {
  background-color: #28a745;
  color: #fff;
  border: 1px solid #28a745;
}

.warning {
  background-color: #ffc107;
  color: #212529;
  border: 1px solid #ffc107;
}

.danger {
  background-color: #dc3545;
  color: #fff;
  border: 1px solid #dc3545;
}

使用这些样式可以创建五种不同颜色的引导徽章。通过更改这些值，可以轻松自定义样式以满足特定需求。

使用方式

引导徽章可以在网站和应用程序中以多种方式使用，例如：用户级别、评论数量、点赞数等。以下是一些使用引导徽章的示例：

<span class="badge primary">Primary</span>
<span class="badge secondary">Secondary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

<p>This user has earned a <span class="badge primary">Gold</span> level badge for their contributions.</p>

<a href="#" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</a>

<button class="btn btn-danger">
  <i class="fa fa-shopping-cart"></i> Checkout <span class="badge badge-light">3</span>
</button>

使用span标签和class属性将不同的颜色和文字内容添加到标记中。还可以将引导徽章作为按钮或链接的一部分添加。

总结

引导徽章是使状态或成就在网站和应用程序中更加突出的一种简单方法。CSS提供了大量的样式选项，是创建自定义引导徽章的最佳方式。