Текст
Добавить смысл через текстовых цветов с ниже классов. Ссылки будут темнеют при наведении курсора мыши:
| Класс | Описание | пример |
|---|---|---|
| .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 с margin-right:auto и margin-left:auto | Попробуй |
| .clearfix | Очищает поплавки | Попробуй |
| .show | Заставляет элемент будет показан | Попробуй |
| .hidden | Заставляет элемент будет скрыт | Попробуй |
| .sr-only | Скрывает элемент для всех устройств, кроме чтения с экрана | Попробуй |
| .sr-only-focusable | Совместимый с .sr-только, чтобы показать элемент еще раз, когда он ориентирован (например, с помощью клавиатуры только пользователь) | Попробуй |
| .text-hide | Помогает заменить содержимое текста элемента с фоновым изображением | Попробуй |
| .close | Указывает на значок закрытия | Попробуй |
| .caret | Указывает функциональные возможности выпадающий (развернется автоматически в меню dropup) | Попробуй |
Отзывчивый Утилиты
Эти классы используются для отображения и / или скрыть его содержимое с помощью устройства с помощью запросов средств массовой информации.
Используйте один или комбинацию из доступных классов для переключая контента по viewport точек останова:
| Классы | Дополнительные маленькие устройства Телефоны (<768px) | Небольшие устройства таблетки (≥768px) | Средние устройства рабочих столов (≥992px) | Большие устройства рабочих столов (≥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 |
По состоянию на v3.2.0 , то .visible-*-* классы для в трех вариациях, по одному для каждого CSS display значения свойства:
| Группа классов | дисплей 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 являются устаревшим v3.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>Результат:
Example
Resize this page to see how the text below changes:
This text is shown only on an EXTRA SMALL screen.
This text is shown only on a SMALL screen.
This text is shown only on a MEDIUM screen.
This text is shown only on a LARGE screen.
Попробуй сам "