助手类（Helper Classes）

优质

小牛编辑

133浏览

2023-12-01

本章讨论Bootstrap中可能派上用场的一些帮助程序类。

关闭图标

使用通用关闭图标来消除模态和警报等内容。使用close类获取关闭图标。

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      ×
   </button>
</p>

Carets

使用插入符号来指示下拉功能和方向。要获得此功能，请使用带有“span”元素的class caret 。

<p>Caret Example<span class = "caret"></span></p>

快速浮动

您可以使用左拉或右pull-left类向左或向右浮动元素，下面的示例演示了这一点。

<div class = "pull-left">Quick Float to left</div>
<div class = "pull-right">Quick Float to right</div>

要将导航栏中的组件与实用程序类对齐，请改用.navbar-left或.navbar-right 。有关详细信息，请参见navbar chapter 。

中心内容块

使用class center-block将元素设置为居中。

<div class = "row">
   <div class = "center-block" style = "width:200px; background-color:#ccc;">
      This is an example for center-block
   </div>
</div>

Clearfix

要清除任何元素的浮动，请使用.clearfix类。

<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;">
   <div class = "pull-left" style = "background:#58D3F7;">
      Quick Float to left
   </div>
   <div class = "pull-right" style = "background: #DA81F5;">
      Quick Float to right
   </div>
</div>

显示和隐藏内容

您可以使用类.show和.show强制显示或隐藏元素（包括屏幕阅读器）。

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
      This is an example for show class
   </div>
   <div class = "hidden" style = "width:200px; background-color:#ccc;">
      This is an example for hide class
   </div>
</div>

屏幕阅读器内容

您可以使用类.sr-only将元素隐藏到除屏幕阅读器之外的所有设备。

<div class = "row" style = "padding: 91px 100px 19px 50px;">
   <form class = "form-inline" role = "form">
      <div class = "form-group">
         <label class = "sr-only" for = "email">Email address</label>
         <input type = "email" class = "form-control" placeholder = "Enter email">
      </div>
      <div class = "form-group">
         <label class = "sr-only" for = "pass">Password</label>
         <input type = "password" class = "form-control" placeholder = "Password">
      </div>
   </form>
</div>

在这里我们可以看到两个输入类型的标签都被赋予了sr-only class类，因此标签只对屏幕阅读器可见。