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: