将 badges.less 和 labels.less 合并到 2.0.3 中

@mdo 2012 年 3 月 22 日

出于某种原因，我们在 2.0.2 版本中将徽章的样式单独放在 LESS 文件中。CSS 代码 95% 是相同的，但我们知道有些人可能需要其中一个或两个，甚至两者都需要。在 2.0.3 版本中，我们将简化一些样式，将它们合并到一个 .less 文件中，并将 :hover 状态限定为仅适用于锚点。

展望未来，我们将使用以下内容作为共享的基础样式集。如您所见，当这些样式组合在一起时，对于那些只想要徽章或标签的人来说，额外的重量并不多。

.label,
.badge {
  font-size: @baseFontSize * .846;
  font-weight: bold;
  line-height: 13px; // ensure proper line-height if floated
  color: @white;
  vertical-align: middle;
  white-space: nowrap;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  background-color: @grayLight;
}

一个文件，多个组件。我们之前在多种类型的导航中已经做过类似的事情，所以对于熟悉 Bootstrap 的人来说，这并不陌生。

另外，我们改变了处理徽章和标签悬停状态的方式。我们不再对本质上是静态元素（例如使用 span 创建的元素）设置默认的悬停状态，而是将悬停状态（光标和背景改变）限定为仅适用于锚点。

a {
  &.label:hover,
  &.badge:hover {
    color: @white;
    text-decoration: none;
    cursor: pointer;
  }
}

Bootstrap 博客

将 badges.less 和 labels.less 合并到 2.0.3 中

相关帖子