ИТ Блог. Создание сайтов с применением Bootstrap
(1 оценок, среднее: 5,00 из 5)
Загрузка...
В этой главе рассматриваются некоторые из вспомогательных классов в 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, поэтому метки будут видны только для чтения с экрана.
Какой-то бред… У меня не работает и всё запутанно рассказано.
Интересней было бы привести пример в стиле ООП
Нормально всё расписано.
В моей компании многие используют эту статью.