Bootstrap Вспомогательные классы
В этой главе будут рассмотрены некоторые вспомогательные классы в Bootstrap, которые могут пригодиться.
Текст
Следующие разные классы показывают разные цвета текста. Если текст является ссылкой, он станет темнее при наведении на него.
| Класс | Описание | Пример |
|---|---|---|
| .text-muted | Стиль текста класса "text-muted" | Попробуйте |
| .text-primary | Стиль текста класса "text-primary" | Попробуйте |
| .text-success | Стиль текста класса "text-success" | Попробуйте |
| .text-info | Стиль текста класса "text-info" | Попробуйте |
| .text-warning | Стиль текста класса "text-warning" | Попробуйте |
| .text-danger | Стиль текста класса "text-danger" | Попробуйте |
Фон
Следующие разные классы показывают разные цвета фона. Если текст является ссылкой, он становится темнее при наведении на него.
| Класс | Описание | Пример |
|---|---|---|
| .bg-primary | Ячейки таблицы используют класс "bg-primary" | Попробуйте |
| .bg-success | Ячейки таблицы используют класс "bg-success" | Попробуйте |
| .bg-info | Ячейки таблицы используют класс "bg-info" | Попробуйте |
| .bg-warning | Ячейки таблицы используют класс "bg-warning" | Попробуйте |
| .bg-danger | Ячейки таблицы используют класс "bg-danger" | Попробуйте |
Другое
| Класс | Описание | Пример |
|---|---|---|
| .pull-left | Обтекание элемента слева | Попробуйте |
| .pull-right | Обтекание элемента справа | Попробуйте |
| .center-block | Установить для элемента display:block и центрировать его | Попробуйте |
| .clearfix | Очистить обтекание | Попробуйте |
| .show | Принудительно показать элемент | Попробуйте |
| .hidden | Принудительно скрыть элемент | Попробуйте |
| .sr-only | Скрыть элементы на всех устройствах, кроме скринридеров | Попробуйте |
| .sr-only-focusable | Используется в сочетании с классом .sr-only, отображается, когда элемент получает фокус (например, для пользователей, использующих только клавиатуру) | Попробуйте |
| .text-hide | Заменить текстовое содержимое, содержащееся в элементе страницы, фоновым изображением | Попробуйте |
| .close | Показать кнопку закрытия | Попробуйте |
| .caret | Показать функциональность выпадающего списка | Попробуйте |
Другие примеры
Закрытие
Используйте значок закрытия, чтобы закрывать модальные окна и окна предупреждений. Используйте классclose⟧, чтобы получить значок закрытия.to get the close icon.
Пример
Попробуйте »
Результат следующий:
aria-hidden="true"Это в основном помогает людям с ограниченными возможностями (например, слепым) использовать устройства экранного чтения (которые автоматически читают содержимое и воспроизводят его вслух). Когда устройство воспроизводит содержимое с этим, оно автоматически пропускает его, чтобы не вводить в заблуждение людей с ограниченными возможностями!
Каретка
Используйте каретку, чтобы указать направление работы выпадающего списка. Используйте элемент <span> с классомcaret⟧, чтобы получить её.to get this functionality.
Результат следующий:
Быстрые обтекания
Вы можете использовать классpull-leftилиpull-right, чтобы сместить элемент влево или вправо. Пример ниже демонстрирует это.
Пример
Попробуйте сами »
Результат следующий:
Чтобы выровнять компоненты в панели навигации, используйте.navbar-leftили.navbar-rightвместо этого. См.Панель навигации Bootstrap。
Центрирование содержимого
Используйте классcenter-block, чтобы центрировать элементы.
Пример
Попробуйте сами »
Результат следующий:
Очистка обтекания
Чтобы очистить обтекание элемента, используйте.clearfix класс。
Пример
Попробуйте сами »
Результат следующий:
Показ и скрытие содержимого
Вы можете использовать класс.showи.hidden, чтобы принудительно показать или скрыть элемент (включая программы чтения с экрана).
Пример
Попробуйте сами »
Результат следующий:
Программа чтения с экрана
Вы можете использовать класс.sr-only, чтобы скрыть элемент от всех устройств, кроме программ чтения с экрана.
Пример
Попробуйте сами »
Результат следующий:
Здесь мы видим, что оба тега label для двух полей ввода имеют классsr-only, поэтому метки будут видны только программам чтения с экрана.
Другие расширения