Bootstrap CSS Вспомогательные классы справка
Текст
Добавьте значение через Text-Colors с классами ниже. Ссылки будут затемнены при наведении:
| Класс | Описание | |
|---|---|---|
| .text-muted | Текст, стилизованный под класс "текст-приглушенный" | |
| .text-primary | Текст, стилизованный под класс "Text-Primary" | |
| .text-success | Текстовый стиль с классом "Text-Success" | |
| .text-info | Текст, стилизованный под класс "Text-info" | |
| .text-warning | Текст в стиле с классом "текст-предупреждение" | |
| .text-danger | Текст, стилизованный под класс "Text-опасность" |
Фон
Добавить значение через фон-цвета с классами ниже. Ссылки затемнить на Hover так же, как текстовые классы:
| Класс | Описание | |
|---|---|---|
| .bg-primary | Ячейка таблицы стилизована под класс "BG-Primary" | |
| .bg-success | Ячейка таблицы стилизована под класс "BG-Success" | |
| .bg-info | Ячейка таблицы стилизована под класс "BG-info" | |
| .bg-warning | Ячейка таблицы стилизована под класс "BG-warning" | |
| .bg-danger | Ячейка таблицы стилизована под класс "BG-опасность" |
Другие
| Класс | Описание | |
|---|---|---|
| .pull-left | Поплавок элемента влево | |
| .pull-right | Поплавок элемента вправо | |
| .center-block | Задает отображаемый элемент: блок с полями справа: авто и поле слева: Авто | |
| .clearfix | Очищает поплавки | |
| .show | Вынуждает элемент быть показанным (дисплей: блок) | |
| .hidden | Заставляет элемент быть скрытым (отображение: нет) | |
| .invisible | Заставляет элемент быть невидимым (видимость: скрытый). Займет место на странице, даже если она невидима | |
| .sr-only | Скрытие элемента для всех устройств, Кроме программ чтения с экрана | |
| .sr-only-focusable | Объедините с. SR-только для отображения элемента снова, когда он сфокусирован (например, пользователь с клавиатурой) | |
| .text-hide | Помогает заменить текстовое содержимое элемента фоновым изображением | |
| .close | Указывает значок закрытия | |
| .caret | Указывает функциональность раскрывающегося списка (будет автоматически отменено в дропуп меню) |
Отзывчивые утилиты
Эти классы используются для отображения и/или скрытия содержимого на устройстве с помощью запросов мультимедиа.
Используйте один или комбинацию доступных классов для переключения содержимого между точками просмотра.
| Classes | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) |
|---|---|---|---|---|
| .visible-xs-* | Visible | Hidden | Hidden | Hidden |
| .visible-sm-* | Hidden | Visible | Hidden | Hidden |
| .visible-md-* | Hidden | Hidden | Visible | Hidden |
| .visible-lg-* | Hidden | Hidden | Hidden | Visible |
| .hidden-xs | Hidden | Visible | Visible | Visible |
| .hidden-sm | Visible | Hidden | Visible | Visible |
| .hidden-md | Visible | Visible | Hidden | Visible |
| .hidden-lg | Visible | Visible | Visible | Hidden |
Скрытые
Скрытие элементов в зависимости от размера экрана:
Пример
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="hidden-xs bg-danger">This text is hidden on an EXTRA SMALL screen.</h1>
<h1 class="hidden-sm bg-info">This text is hidden on a SMALL screen.</h1>
<h1 class="hidden-md bg-warning">This is text hidden on a MEDIUM screen.</h1>
<h1 class="hidden-lg bg-success">This is text hidden on a LARGE screen.</h1>
Result:
Пример
Resize this page to see how the text below changes:
This text is hidden on an EXTRA SMALL screen.
This text is hidden on a SMALL screen.
This is text hidden on a MEDIUM screen.
This is text hidden on a LARGE screen.
По состоянию на v 3.2.0, .visible-*-* классы для поставляются в трех вариациях, по одному для каждого display значения свойства CSS:
| Группа классов | CSS дисплей |
|---|---|
| visible-*-block | display: block; |
| .visible-*-inline | display: inline; |
| .visible-*-inline-block | display: inline-block; |
Например, для малых ( sm ) экранов доступны .visible-*-* следующие классы: .visible-sm-block , .visible-sm-inline и .visible-sm-inline-block .
Классы .visible-xs ,, .visible-sm и являются устаревшими по состоянию на .visible-md .visible-lg v 3.2.0.
Пример
<h2>Example</h2>
<p>Resize this page to see how the text below changes:</p>
<h1 class="visible-xs">This text is shown only on an EXTRA SMALL screen.</h1>
<h1 class="visible-sm">This text is shown only on a SMALL screen.</h1>
<h1 class="visible-md">This text is shown only on a MEDIUM screen.</h1>
<h1 class="visible-lg">This text is shown only on a LARGE screen.</h1>
Result:
Пример
Resize this page to see how the text below changes:
