Последние учебники веб-разработки
 

Bootstrap CSS Helper Classes Reference


Текст

Добавить смысл через текстовых цветов с ниже классов. Ссылки будут темнеют при наведении курсора мыши:

Класс Описание пример
.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.


Попробуй сам "