Учебник по Bootstrap 4

BS4 ГЛАВНАЯ BS4 Начать Контейнеры BS4 Базовая сетка BS4 Типография BS4 Цвета BS4 Таблицы BS4 Изображения BS4 BS4 Джамботрон Оповещения BS4 Кнопки БС4 Группы кнопок BS4 Значки BS4 Индикаторы выполнения BS4 Спиннеры BS4 BS4 Пагинация Группы списков BS4 Карты BS4 Выпадающие списки BS4 Свернуть BS4 BS4 Навс BS4 навигационная панель БС4 Формы Входы БС4 Входные группы BS4 Пользовательские формы BS4 BS4 Карусель BS4 модальный Подсказка BS4 BS4 всплывающее окно BS4 Тост BS4 прокрутки Утилиты BS4 BS4 Flex Иконки BS4 Медиа-объекты BS4 Фильтры BS4

Bootstrap 4 Сетка

Сетевая система BS4 BS4 Сложенный/горизонтальный BS4 Сетка XSмаленький BS4 Малая сетка Сетка BS4 средняя BS4 Сетка большая BS4 Сетка XLarge Примеры сетки BS4

Начальная загрузка 4 Другое

Базовый шаблон BS4 Упражнения BS4 Викторина БС4

Начальная загрузка 4 Ссылка

Все классы JS-оповещение JS-кнопка JS Карусель Свернуть JS Выпадающий список JS Модальный JS JS всплывающее окно JS прокрутка Вкладка JS JS тосты JS-подсказка


Бутстрап 4 цвета


Цвета текста

В Bootstrap 4 есть несколько контекстных классов, которые можно использовать для предоставления «значения через цвета».

Классы для цветов текста: .text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger, .text-secondary, .text-white, .text-dark, .text-body(цвет тела по умолчанию/часто черный) и .text-light:

Пример

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary text.

Dark grey text.

Body text.

Light grey text.

Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет при наведении:

Вы также можете добавить непрозрачность 50% для черного или белого текста с помощью классов .text-black-50или :.text-white-50

Пример

Black text with 50% opacity on white background

White text with 50% opacity on black background


Цвета фона

Классы для цветов фона: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkи .bg-light.

Обратите внимание, что цвета фона не задают цвет текста, поэтому в некоторых случаях вы захотите использовать их вместе с .text-*классом.

Пример

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Secondary background color.

Dark grey background color.

Light grey background color.