辅助类 | Helper classes

Helper classes

上下文颜色

用一些强调实用程序类, 通过颜色传达意义。这些也可能被应用到链接上, 并且在悬停时会变暗, 就像我们的默认链接样式一样。

Open example on getbootstrap.com

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

处理特殊性

由于其他选择器的特殊性，有时强调类不能应用。在大多数情况下，一个充分的解决方法是将您的文本封装<span>在类中。

将意义传递给辅助技术

使用颜色来增加意义只能提供一种视觉指示，而不会传达给辅助技术的用户 - 如屏幕阅读器。确保由颜色表示的信息对于内容本身来说是显而易见的（上下文颜色仅用于强化已经存在于文本/标记中的含义），或者通过其他方式包含，例如隐藏在.sr-only类中的附加文本。

上下文背景

与上下文文本颜色类相似，可以轻松地将元素的背景设置为任何上下文类。就像文本类一样，锚组件会在悬停时变暗。

Open example on getbootstrap.com

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

处理特殊性

由于其他选择器的特殊性，有时上下文背景类不能应用。在某些情况下，一个充分的解决方法是将元素的内容封装<div>在类中。

将意义传递给辅助技术

与上下文颜色一样，确保通过颜色传达的任何意义也以非纯粹表示的格式传达。

关闭图标

使用通用的关闭图标来解除模式和警报等内容。

Open example on getbootstrap.com

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

插入符号

使用插入符号来指示下拉功能和方向。请注意，默认插入符将在下拉菜单中自动反转。

Open example on getbootstrap.com

<span class="caret"></span>

快速浮动

用一个类向左或向右浮动一个元素。!important包含在内以避免特殊性问题。类也可以用作mixin。

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left(
}
.another-element {
  .pull-right(
}

不适用于导航条

要将navbars中的组件与实用程序类对齐，请使用.navbar-left或.navbar-right替代。有关详细信息，请参阅导航栏文档。

中心内容块

将元素设置为display: block并通过margin居中。可被mixin和类调用。

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block(
}

Clearfix

float通过添加.clearfix 到父元素可轻松清除 。利用Nicolas Gallagher推广的micro clearfix。也可以用作混音。

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix(
}

显示和隐藏内容

使用.show和.hidden类强制元素显示或隐藏（包括屏幕阅读器）。这些类用!important避免特殊性冲突，就像快速浮动一样。它们只能用于块级切换。它们也可以用作mixin。

.hide是可用的，但它并不总是影响屏幕阅读器，从v3.0.1开始已弃用。使用.hidden或.sr-only替代。

此外，.invisible只能用于切换元素的可见性，这意味着它display不会被修改，元素仍然会影响文档的流向。

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show(
}
.another-element {
  .hidden(
}

屏幕阅读器和键盘导航内容

隐藏所有设备的元素，除了屏幕阅读器使用.sr-only。.sr-only与.sr-only-focusable焦点合并时再次显示元素（例如，通过键盘用户）。必须遵循以下可访问性最佳实践。也可以用作mixin。

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only(
  .sr-only-focusable(
}

图像替换

利用.text-hide类或mixin帮助用背景图像替换元素的文本内容。

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide(
}