Компьютерапия

В этой статье обсуждаются некоторые вспомогательные классы в Bootstrap, которые могут пригодиться.

Значок закрыть

Используйте общий значок закрытия для удаления содержимого, например, модалов и предупреждений. Используйте класс .close, чтобы получить значок закрытия.

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

CARETS

Используйте каретки, чтобы указать функциональность и направление выпадающего списка. Чтобы получить эту функциональность, используйте класс .caret с элементом span.

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

Быстрые поплавки

Вы можете перемещать элемент влево или вправо с помощью класса .pull-left или .pull-right соответственно, следующий пример демонстрирует это.

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

Чтобы выровнять компоненты в меню с классами утилиты, вместо этого используйте .navbar-left или .navbar-right.

Центровые блоки контента

Используйте класс .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 и .hidden.

<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.

<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, поэтому метки будут видны только для чтения с экрана.