В этой главе рассматриваются некоторые из вспомогательных классов в Bootstrap, которые могут пригодиться.
Используйте иконку закрытия для закрытия модального окна и оповещения. Используйте класс close , чтобы получить значок закрытия.
<p>Close Icon Example <button type = "button" class = "close" aria-hidden = "true"> × </button> </p>
Используйте курсор, для того чтобы указать выпадающий список и направление. Для того, чтобы получить эту функциональность с помощью класса carets используйте вместе с элементом <span>.
<p>Пример курсора<span class = "caret"></span></p>
Вы можете равнять элемент влево или вправо с помощью класса pull-left или pull-right, следующий пример демонстрирует это.
<div class = "pull-left">Быстрое равнение налево</div> <div class = "pull-right">Быстрое равнение направо</div>
Для выравнивания компонентов в NavBars с полезными классами, используйте .navbar-left или .navbar-right вместо вышеуказанных. Смотрите главу navbar для деталей.
Используйте класс center-block для установки элемента по центру.
<div class = "row"> <div class = "center-block" style = "width:200px; background-color:#ccc;"> Это пример center-block </div> </div>
Чтобы очистить равнение любого элемента, используйте класс .clearfix.
<div class = "clearfix" style = "background: #D8D8D8;border: 1px solid #000; padding: 10px;"> <div class = "pull-left" style = "background:#58D3F7;"> Быстрое равнение налево </div> <div class = "pull-right" style = "background: #DA81F5;"> Быстрое равнение направо </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;"> Это пример показа класса </div> <div class = "hidden" style = "width:200px; background-color:#ccc;"> Это пример скрытия класса </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">Почтовый адрес</label> <input type = "email" class = "form-control" placeholder = "Enter email"> </div> <div class = "form-group"> <label class = "sr-only" for = "pass">Пароль</label> <input type = "password" class = "form-control" placeholder = "Password"> </div> </form> </div>
Здесь мы можем видеть, что надпись обоего типов входных присваиваются класс sr-only, поэтому метки будут видны только для чтения с экрана.