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

Bootstrap - Вспомогательные классы

Категория: Bootstrap 3
Просмотров: 1848

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

Содержание:

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

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

<p>Close Icon Example
   <button type = "button" class = "close" aria-hidden = "true">
      ×
   </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, поэтому метки будут видны только для чтения с экрана.




Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

Новые статьи

Предыдущие статьи

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok