Bootstrap 4 Class Справочник
Полный список всех классов Bootstrap 4
Полный список всех классов Bootstrap 4 CSS с описанием и примерами:
| Class | Описание | Category | |
|---|---|---|---|
.active |
Добавление цвета белого текста к активной ссылке в навигационной области . | Navbar | |
.active |
Добавление синего цвета фона к элементу активного списка в группе списков | List Groups | |
.active |
Добавление темно-синего цвета фона для имитации нажатой кнопки | Buttons | |
.active |
Добавляет синий цвет фона для активного раскрывающегося элемента в раскрывающемся списке | Dropdowns | |
.active |
Добавление синего цвета фона в активную ссылку разбиения на страницы (для выделения текущей страницы) | Pagination | |
.active |
Отображает/показывает текущий элемент карусели | Carousel | |
.alert |
Создает окно сообщения предупреждения | Alerts | |
.alert-danger |
Тревога. Указывает на опасное или потенциально отрицательное действие | Alerts | |
.alert-dark |
Темная тревога. Темно-серый окно оповещения | Alerts | |
.alert-dismissible |
Указывает закрывающееся окно оповещения. Вместе с .close классом этот класс используется для закрытия оповещения (добавляет дополнительные отступы) |
Alerts | |
.alert-heading |
Добавляет color:inherit к указанному элементу |
Alerts | |
.alert-info |
Синее оповещение. Указывает нейтральное информативное изменение или действие | Alerts | |
.alert-light |
Сигнал тревоги. Светлая серая коробка оповещения | Alerts | |
.alert-link |
Используется на ссылки внутри оповещения для обеспечения соответствия цветные ссылки | Alerts | |
.alert-primary |
Синяя тревога. Указывает на важное действие | Alerts | |
.alert-secondary |
Серый сигнал тревоги. Указывает на "менее" важное действие | Alerts | |
.alert-success |
Зеленая тревога. Указывает на успешное или положительное действие | Alerts | |
.alert-warning |
Желтый сигнал тревоги. Указывает на осторожность следует принимать с этим действием | Alerts | |
.align-baseline |
Элемент выравнивается по базовой линии родительского элемента. Это значение по умолчанию | Utilities | |
.align-bottom |
Элемент выравнивается по нижнему элементу в строке | Utilities | |
.align-middle |
Элемент помещается в середину родительского элемента | Utilities | |
.align-top |
Элемент выравнивается по верхней части самого высокого элемента на линии | Utilities | |
.align-text-top |
Элемент выравнивается по верхнему краю шрифта родительского элемента | Utilities | |
.align-text-bottom |
Элемент выравнивается по нижнему краю шрифта родительского элемента | Utilities | |
.align-content-around |
Выравнивание собранных элементов "вокруг" | Flex | |
.align-content-*-around |
Выравнивание собранных элементов "вокруг" на разных экранах | Flex | |
.align-content-center |
Выравнивание собранных элементов по центру | Flex | |
.align-content-*-center |
Выравнивание собранных элементов в центре на разных экранах | Flex | |
.align-content-end |
Выравнивание собранных элементов в конце | Flex | |
.align-content-*-end |
Выравнивание собранных элементов в конце на разных экранах | Flex | |
.align-content-start |
Выравнивание собранных элементов с начала | Flex | |
.align-content-*-start |
Выравнивание собранных элементов с начала на разных экранах | Flex | |
.align-content-stretch |
Растянуть собранные элементы | Flex | |
.align-content-*-stretch |
Растянуть собранные элементы на разных экранах | Flex | |
.align-items-start |
Выравнивание отдельных строк элементов с начала | Flex | |
.align-items-*-start |
Выравнивание отдельных рядов элементов с начала на разных экранах | Flex | |
.align-items-end |
Выравнивание отдельных строк элементов в конце | Flex | |
.align-items-*-end |
Выравнивание отдельных рядов элементов в конце на разных экранах | Flex | |
.align-items-center |
Выравнивание отдельных строк элементов в центре | Flex | |
.align-items-*-center |
Выравнивание одиночных рядов элементов в центре на разных экранах | Flex | |
.align-items-baseline |
Выравнивание отдельных строк элементов по базовой линии | Flex | |
.align-items-*-baseline |
Выравнивание отдельных строк элементов в базовой линии на разных экранах | Flex | |
.align-items-stretch |
Растянуть отдельные строки элементов | Flex | |
.align-items-*-stretch |
Растянуть отдельные ряды элементов на разных экранах | Flex | |
.align-self-start |
Выравнивание элемента Flex с начала | Flex | |
.align-self-*-start |
Выравнивание элемента Flex с начала на разных экранах | Flex | |
.align-self-end |
Выравнивание элемента Flex в конце | Flex | |
.align-self-*-end |
Выравнивание элемента Flex в конце на разных экранах | Flex | |
.align-self-center |
Выравнивание элемента Flex в центре | Flex | |
.align-self-*-center |
Выравнивание элемента Flex в центре на разных экранах | Flex | |
.align-self-baseline |
Выравнивание элемента Flex по базовой линии | Flex | |
.align-self-*-start |
Выравнивание элемента Flex по базовой линии на разных экранах | Flex | |
.align-self-stretch |
Растянуть гибкий элемент | Flex | |
.align-self-*-stretch |
Растянуть гибкий элемент на разных экранах | Flex | |
.badge |
Создает круглый значок (серый круг-часто используется в качестве числового индикатора) | Badges | |
.badge-danger |
Красный значок. Указывает на опасное или потенциально отрицательное действие | Badges | |
.badge-dark |
Тёмный значок. Темно-серый окно оповещения | Badges | |
.badge-info |
Значок синего. Указывает нейтральное информативное изменение или действие | Badges | |
.badge-light |
Светлый значок. Светлая серая коробка оповещения | Badges | |
.badge-pill |
Делает значок более круглым | Badges | |
.badge-primary |
Синий значок. Указывает на важное действие | Badges | |
.badge-secondary |
Серый значок. Указывает на "менее" важное действие | Badges | |
.badge-success |
Зелёный значок. Указывает на успешное или положительное действие | Badges | |
.badge-warning |
Желтый значок. Указывает на осторожность следует принимать с этим действием | Badges | |
.bg-danger |
Добавляет красный цвет фона к элементу. Представляет опасность или отрицательное действие | Colors | |
.bg-dark |
Добавляет темный серый цвет фона к элементу | Colors | |
.bg-info |
Добавляет бирюзовый цвет фона к элементу. Представляет некоторую информацию | Colors | |
.bg-light |
Добавление светло-серого цвета фона к элементу | Colors | |
.bg-primary |
Добавляет синий цвет фона к элементу. Представляет что-то важное | Colors | |
.bg-secondary |
Добавляет серый цвет фона к элементу. Указывает на "менее" важное действие | Colors | |
.bg-success |
Добавляет зеленый цвет фона к элементу. Указывает на успех или положительное действие | Colors | |
.bg-warning |
Добавляет желтый/оранжевый цвет фона к элементу. Представляет предупреждение или отрицательное действие | Colors | |
.blockquote |
Styles цитирует блоки содержимого из другого источника (добавляет больший размер шрифта (1.25 REM)) | Typography | |
.blockquote-footer |
Стили заголовок источника внутри цитата (светло-серый текст с отступом) | Typography | |
.border |
Добавление границы к элементу | Utilities | |
.border-bottom-0 |
Удаление нижней границы элемента | Utilities | |
.border-danger |
Добавляет красную границу к элементу (указывает на опасность) | Utilities | |
.border-dark |
Добавление темной границы к элементу | Utilities | |
.border-info |
Добавление синей границы к элементу (обозначает информацию) | Utilities | |
.border-left-0 |
Удаляет левую границу из элемента | Utilities | |
.border-light |
Добавление светло-серой границы к элементу | Utilities | |
.border-primary |
Добавление синей границы к элементу | Utilities | |
.border-right-0 |
Удаление правой границы элемента | Utilities | |
.border-top-0 |
Удаление верхней границы элемента | Utilities | |
.border-secondary |
Добавление серой границы к элементу | Utilities | |
.border-success |
Добавление зеленой границы к элементу (указывает на успешное завершение) | Utilities | |
.border-warning |
Добавление оранжевой границы к элементу (указывает на предупреждение) | Utilities | |
.border-white |
Добавление белой границы к элементу | Utilities | |
.border-0 |
Удаляет все границы элемента | Utilities | |
.breadcrumb |
Разбиение на страницы. Указывает расположение текущей страницы в навигационной иерархии | Pagination | |
.breadcrumb-item |
Стили — элементы списка или ссылки внутри цепочки навигации | Pagination | |
.btn |
Создание базовой кнопки (серый фон и закругленные углы) | Buttons | |
.btn-block |
Создает кнопку уровня блока, охватывающую всю ширину родительского элемента | Buttons | |
.btn-dark |
Темная серая кнопка | Buttons | |
.btn-danger |
Красная кнопка. Указывает на опасность или отрицательное действие | Buttons | |
.btn-group |
Группирует кнопки вместе в одной строке | Button Groups | |
.btn-group-lg |
Большая группа кнопок (делает все кнопки в группе кнопок больше-увеличенный размер шрифта и заполнение) | Button Groups | |
.btn-group-sm |
Малая группа кнопок (делает все кнопки в группе кнопок меньше) | Button Groups | |
.btn-group-vertical |
Заставляет группу кнопок отображаться вертикально в сложенном виде | Button Groups | |
.btn-info |
Синей кнопке. Представляет нейтральное информативное изменение или действие | Buttons | |
.btn-light |
Светлая серая кнопка | Buttons | |
.btn-link |
Делает кнопку похожую на ссылку (поведение кнопки Get) | Buttons | |
.btn-lg |
Большая кнопка | Buttons | |
.btn-outline-dark |
Темная серая граница/Контурная кнопка | Buttons | |
.btn-outline-danger |
Красная граница/Контурная кнопка. Указывает на опасность или отрицательное действие | Buttons | |
.btn-outline-info |
Бирюзовая граница/Контурная кнопка. Представляет нейтральное информативное изменение или действие | Buttons | |
.btn-outline-light |
Светлая серая граница/Контурная кнопка | Buttons | |
.btn-outline-primary |
Синяя граница/Контурная кнопка. | Buttons | |
.btn-outline-secondary |
Серая граница/Контурная кнопка. Указывает на "менее" важное действие | Buttons | |
.btn-outline-success |
Зеленая граница/Контурная кнопка. Указывает на успех или положительное действие | Buttons | |
.btn-outline-warning |
Оранжевая граница/Контурная кнопка. Представляет предупреждение или отрицательное действие | Buttons | |
.btn-primary |
Синяя кнопка. Указывает на что-то важное | Buttons | |
.btn-sm |
Маленькая кнопка | Buttons | |
.btn-secondary |
Серая кнопка. Указывает на "менее" важное действие | Buttons | |
.btn-success |
Зеленая кнопка. Указывает на успех или положительное действие | Buttons | |
.btn-toolbar |
Объединение наборов кнопок в панели инструментов кнопок для более сложных компонентов | Button Groups | |
.btn-warning |
Оранжевая кнопка. Представляет предупреждение или отрицательное действие | Buttons | |
.card |
Создает карточку | Cards | |
.card-body |
Контейнер для содержимого карты | Cards | |
.card-columns |
Контейнер для создания кладки, как сетка карт | Cards | |
.card-danger |
Добавляет на карточку красный цвет фона. Представляет опасность или отрицательное действие | Cards | |
.card-dark |
Добавляет серый цвет фона к карточке | Cards | |
.card-deck |
Контейнер для создания сетки карт с одинаковой высотой и шириной | Cards | |
.card-footer |
Нижний колонтитул карты | Cards | |
.card-group |
Контейнер для создания сетки карт, которые имеют одинаковую высоту и ширину, без боковых полей | Cards | |
.card-header |
Заголовок карты | Cards | |
.card-header-tabs |
Стили навигации вкладки внутри заголовка карты | Cards | |
.card-header-pills |
Стили навигационных таблеток внутри заголовка карты | Cards | |
.card-img-bottom |
Поместите изображение снизу внутри карты | Cards | |
.card-img-overlay |
Превращает изображение в фон карты. Часто используется для добавления текста поверх изображения | Cards | |
.card-img-top |
Поместите изображение вверху внутри карты | Cards | |
.card-info |
Добавляет цвет синего цвета к карточке. Представляет некоторую информацию | Cards | |
.card-light |
Добавляет светло-серый цвет фона к карточке | Cards | |
.card-link |
Добавляет синий цвет к любой ссылке и наведите эффект внутри карты | Cards | |
.card-primary |
Добавляет голубой цвет фона к карточке. Представляет что-то важное | Cards | |
.card-secondary |
Добавляет серый цвет фона к карточке. Представляет что-то "менее" важное | Cards | |
.card-subtitle |
.card-subtitleиспользуется после a .card-title и добавляет в элемент следующее:margin-top: -.375rem; margin-bottom: 0; |
Cards | |
.card-success |
Добавляет зеленый цвет фона к карточке. Указывает на успех или положительное действие | Cards | |
.card-text |
Используется для удаления нижнего поля для элемента p, если он является последним дочерним элементом (или единственным), внутри.card-body |
Cards | |
.card-title |
Добавляет заголовок к любому элементу заголовка внутри карточки | Cards | |
.card-warning |
Добавляет желтый/оранжевый цвет фона на карточку. Представляет предупреждение или отрицательное действие | Cards | |
.carousel |
Создает Карусель (слайд-шоу) | Carousel | |
.carousel-caption |
Создает текст заголовка для каждого слайда в карусели | Carousel | |
.carousel-control-next |
Контейнер для "Next" Карусель/пункт Ссылка | Carousel | |
.carousel-control-next-icon |
Используется вместе с .carousel-control-next для создания "следующий" значок/Кнопка (стрелка вправо) |
Carousel | |
.carousel-control-prev |
Контейнер для "Предыдущий" Карусель/пункт Ссылка | Carousel | |
.carousel-control-prev-icon |
Используется вместе с .carousel-control-prev для создания "Предыдущий" значок/Кнопка (влево-заостренные стрелки) |
Carousel | |
.carousel-indicators |
Добавляет маленькие точки/индикаторы в нижней части каждого слайда (который показывает, сколько слайдов есть в карусели, и какой слайд пользователь в настоящее время просмотра) | Carousel | |
.carousel-inner |
Контейнер для элементов слайда | Carousel | |
.carousel-item |
Задает содержимое каждого слайда | Carousel | |
.clearfix |
Очищает поплавки | Utilities | |
.close |
Стиль значка закрытия. Часто используется для оповещений и модальностей. Часто используется вместе с & Times; символ, чтобы создать фактический значок (лучше лукионг "x"). Он плавает вправо по умолчанию | Utilities | |
.col-* |
Создает раскладку столбцов для дополнительных мелких устройств (и вверх/все устройства, если они не объединены с другими классами столбцов). *может быть число от 1 до 12 |
Grid System | |
.col-sm-* |
Создает макет столбца для небольших устройств (и вверх, если не объединен с другими классами столбцов). *может быть число от 1 до 12 |
Grid System | |
.col-md-* |
Создает макет столбца для средних устройств (и вверх, если не сочетается с другими классами столбцов). *может быть число от 1 до 12 |
Grid System | |
.col-lg-* |
Создает макет столбца для больших устройств (и вверх, если не сочетается с другими классами столбцов). *может быть число от 1 до 12 |
Grid System | |
.col-xl-* |
Создание макета столбца для дополнительных больших устройств. *может быть число от 1 до 12 |
Grid System | |
.collapse |
Обозначает складное содержимое, которое может быть скрыто или показано по требованию | Collapse | |
.collapse show |
Показать складное содержимое по умолчанию | Collapse | |
.container |
Фиксированная ширина контейнера с шириной определяется экран сайтов. Равное поле слева и справа. | Containers | |
.container-fluid |
Контейнер, охватывающий всю ширину экрана | Containers | |
.disabled |
Отключает кнопку (добавляет непрозрачность и значок "нет парковки-знак" при наведении) | Buttons | |
.disabled |
Отключает выпадающий элемент (добавляет серый цвет текста и значок "нет парковки-знак" при наведении) | Dropdowns | |
.disabled |
Отключает ссылку на разбиение на страницы (не может быть нажата-добавляет серый цвет текста и значок "нет парковки-знак" при наведении) | Pagination | |
.disabled |
Отключает элемент списка в группе списка (не может быть нажата-добавляет светло-серый цвет и удаляет эффект наведения на ссылки элемента списка) | List Groups | |
.dropdown |
Создание переключаемого меню, позволяющего пользователю выбрать одно значение из стандартного списка | Dropdowns | |
.dropdown-divider |
Используется для разделения ссылок в выпадающем меню с тонкой горизонтальной границей | Dropdowns | |
.dropdown-header |
Используется для добавления заголовков внутри раскрывающегося меню | Dropdowns | |
.dropdown-item |
Создает раскрывающийся элемент (добавляется к ссылкам или кнопкам внутри. раскрывающееся меню) | Dropdowns | |
.dropdown-item-text |
Используется для добавления простого текста в раскрывающийся список или используется для ссылок для стиля ссылок по умолчанию | Dropdowns | |
.dropdown-menu |
Добавляет стили по умолчанию для контейнера раскрывающегося меню | Dropdowns | |
.dropdown-menu-right |
Выравнивание выпадающего меню по правому краю | Dropdowns | |
.dropdown-toggle |
Используется на кнопке, которая должна скрывать и показывать (переключать) раскрывающееся меню | Dropdowns | |
.dropleft |
Влево-выравнивание раскрывающегося списка | Dropdowns | |
.dropright |
Выравнивание по правому краю раскрывающегося списка | Dropdowns | |
.dropup |
Указывает дропуп меню (вверх, а не вниз) | Dropdowns | |
.d-block |
Создание элемента блока (Добавляет display:block ) |
Utilities | |
.d-*-block |
Создание элемента блока на определенной ширине экрана | Utilities | |
.d-flex |
Создание контейнера Flexbox и преобразование прямых дочерних элементов в элементы Flex | Flex | |
.d-*-flex |
Создает контейнер Flexbox для определенного размера экрана | Flex | |
.d-inline-flex |
Создает встроенный контейнер Flexbox | Flex | |
.d-*-inline-flex |
Создает встроенный контейнер Flexbox для определенного размера экрана | Flex | |
.embed-responsive |
Контейнер для встроенного содержимого. Позволяет правильно масштабировать видео или слайд-шоу на любом устройстве | Images | |
.embed-responsive-16by9 |
Контейнер для встроенного содержимого. Создает соотношение сторон 16:9, встроенное содержимое | Images | |
.embed-responsive-4by3 |
Контейнер для встроенного содержимого. Создает соотношение сторон 4:3, встроенное содержимое | Images | |
.embed-responsive-item |
Используется внутри .embed-responsive . Масштабирование видео красиво к родительскому элементу |
Images | |
.fade |
Добавление эффекта затухания при закрытии окна оповещения | Alerts | |
.fade |
Добавляет эффект затухания при показе содержимого вкладки/таблетки | Navs | |
.fade |
Добавляет эффект затухания при открытии модального | Modal | |
.fixed-bottom |
Делает элемент оставаться в нижней части экрана (липкий/фиксированный) | Utilities | |
.fixed-top |
Делает элемент оставаться в верхней части экрана (липкий/фиксированный) | Utilities | |
.flex-column |
Отображать гибкие элементы по вертикали | Flex | |
.flex-*-column |
Отображать гибкие элементы по вертикали на различных размерах экрана: | Flex | |
.flex-column-reverse |
Отображать гибкие элементы по вертикали, в обратном порядке | Flex | |
.flex-*-column-reverse |
Отображать гибкие элементы по вертикали, в обратном направлении на различных размерах экрана | Flex | |
.flex-fill |
Используется для элементов Flex для принудительного его/их в столбцы с одинаковой шириной | Flex | |
.flex-*-fill |
Принудить элементы Flex к одинаковой ширине на разных экранах | Flex | |
.flex-grow-0|1 |
Используется на одном элементе Flex для занимают остальное свободное пространство | Flex | |
.flex-nowrap |
Не оборачивайте элементы Flex | Flex | |
.flex-*-nowrap |
Не оборачивать элементы на разных экранах | Flex | |
.flex-shrink-0|1 |
Используется на одном элементе Flex для его сжатия при необходимости | Flex | |
.flex-row |
Отображать гибкие элементы по горизонтали (бок о бок) | Flex | |
.flex-*-row |
Отображать гибкие элементы по горизонтали на определенном размере экрана | Flex | |
.flex-row-reverse |
Отображать гибкие элементы по правому краю и по горизонтали | Flex | |
.flex-*-row-reverse |
Отображать гибкие элементы по правому краю и по горизонтали на определенном размере экрана | Flex | |
.flex-wrap |
Обернуть элементы Flex | Flex | |
.flex-*-wrap |
Перенос элементов на различные экраны | Flex | |
.flex-wrap-reverse |
Обернуть элементы Flex в обратном порядке | Flex | |
.flex-*-wrap-reverse |
Обернуть элементы Flex в обратном порядке на разных экранах | Flex | |
.float-left |
Поплавок элемента влево | Utilities | |
.float-*-left |
Поплавок элемента влево на разных экранах | Utilities | |
.float-none |
Удаление плавающих элементов из элемента | Utilities | |
.float-right |
Поплавок элемента вправо | Utilities | |
.float-*-right |
Поплавок элемента влево на разных экранах | Utilities | |
.font-weight-bold |
Полужирный текст | Typography | |
.font-weight-italic |
Курсивный текст | Typography | |
.font-weight-light |
Легковесный текст (font-weight:300) | Typography | |
.font-weight-normal |
Обычный текст (font-weight:400) | Typography | |
.form-check |
Контейнер для флажков. Добавляет правильное заполнение | Forms | |
.form-check-inline |
Делает флажки отображаются на той же строке (по горизонтали) | Forms | |
.form-check-input |
Флажки стилей с соответствующими полями | Forms | |
.form-check-label |
Обеспечивает правильное поле для меток, используемых вместе с флажками | Forms | |
.form-control |
Используется на входных, текстовое и выбор элементов, чтобы охватить всю ширину страницы и сделать их отзывчивыми | Forms | |
.form-control-file |
Добавляет display:block и width:100% для ввода, поданных с типом = "файл" |
Forms | |
.form-control-lg |
Управление большими формами | Forms | |
.form-control-plaintext |
Стили элемента управления формы как обычный текст | Forms | |
.form-control-range |
Добавляет display:block и width:100% к входной подано с типом = "диапазон" |
Forms | |
.form-control-sm |
Управление малыми формами | Forms | |
.form-group |
Контейнер для ввода и метки формы | Forms | |
.form-inline |
Делает <form> Выравнивание по левому краю с элементами управления inline-block (это относится только к формам в видовых экранах, которые по крайней мере 768px в ширину) | Forms | |
.h1 - .h6 |
Делает элемент похожим на заголовок выбранного класса (H1-H6) | Typography | |
.h-25 |
Устанавливает высоту элемента до 25% | Utilities | |
.h-50 |
Устанавливает высоту элемента до 50% | Utilities | |
.h-75 |
Устанавливает высоту элемента до 75% | Utilities | |
.h-100 |
Устанавливает высоту элемента до 100% | Utilities | |
.img-fluid |
Отзывчивый образ (добавляет Макс-ширина: 100% и высота: Авто) | Images | |
.img-thumbnail |
Формирует изображение на миниатюру (тонкие светло-серые границы) | Images | |
.initialism |
Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта |
Typography | |
.input-lg |
Большое поле ввода | Input Sizing | |
.input-sm |
Небольшое поле ввода | Input Sizing | |
.invisible |
Сделать элемент невидимым | Utilities | |
.jumbotron |
Создает мягкий серый заголовок/прямоугольник с закругленными углами, что увеличивает размер шрифта текста внутри него. Используется для вызова дополнительного внимания к какому-либо Специальному содержанию или информации | Jumbotron | |
.jumbotron-fluid |
Создает Jumbotron с полной шириной (серый мягкий заголовок) без округленных границ | Jumbotron | |
.justify-content-* |
Выравнивание элементов Flex с начала, в конце, по центру, между и "вокруг" | Flex | |
.justify-content-*-around |
Выравнивание элементов Flex "вокруг" на различных размерах экрана | Flex | |
.justify-content-*-between |
Выравнивание элементов Flex в "между" на различных размерах экрана | Flex | |
.justify-content-*-center |
Выравнивание элементов Flex в центре на различных размерах экрана | Flex | |
.justify-content-*-end |
Выравнивание элементов Flex в конце на различных размерах экрана | Flex | |
.justify-content-*-start |
Выравнивание элементов Flex с начала на различных размерах экрана | Flex | |
.lead |
Увеличение размера шрифта и высоты строки абзаца | Typography | |
.list-group |
Создание группы списков с рамками для <li> элементов |
List Group | |
.list-group-item |
Добавляется к каждому <li> элементу в группе списков |
List Group | |
.list-group-item-action |
Добавлено к ссылкам внутри группы List, чтобы сделать их выделяться на Hover (темный фон) | List Group | |
.list-group-item-danger |
Красный цвет фона для элемента списка в группе списков | List Group | |
.list-group-item-dark |
Темно-серый цвет фона для элемента списка в группе списков | List Group | |
.list-group-item-info |
Светло-голубой цвет фона для элемента списка в группе списков | List Group | |
.list-group-item-light |
Светло-серый цвет фона для элемента списка в группе списков | List Group | |
.list-group-item-primary |
Синий цвет фона для элемента списка в группе списков | List Group | |
.list-group-item-success |
Зеленый цвет фона для элемента списка в группе списков | List Group | |
.list-group-item-warning |
Желтый цвет фона для элемента списка в группе списков | List Group | |
.list-inline |
Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item каждым элементом <li>) |
Typography | |
.list-inline-item |
Размещение всех элементов списка в одной строке (используется вместе с .list-inline родительским элементом <ul>) |
Typography | |
.list-unstyled |
Удаляет все стандартные стили списка (маркеры, левое поле и т. д.) из
<ul> списка или <ol> |
Typography | |
.mark |
Выделение текста: выделенный текст | Typography | |
.media |
Выравнивание мультимедийных объектов вместе с содержимым (например, изображениями или видео, которые часто используются для комментариев в блоге и т.д.) | Media Objects | |
.media-body |
Контейнер для мультимедийного содержимого | Media Objects | |
.modal |
Идентифицирует содержимое как модальное и привлекает к нему внимание | Modals | |
.modal-body |
Определяет стиль тела модального. Добавить HTML разметку здесь (p, IMG, и т.д.) | Modals | |
.modal-content |
Стили модальные (граница, фон-цвет и т.д.). Внутри этого, добавьте заголовку модального, тело и нижний колонтитул, если необходимо | Modals | |
.modal-dialog-centered |
Центрировать модальные вертикально и горизонтально в пределах страницы | Modals | |
.modal-footer |
Нижний колонтитул модального (часто содержит кнопку действия и кнопку закрытия) | Modals | |
.modal-header |
Заголовок модального (часто содержит заголовок и кнопку закрытия) | Modals | |
.modal-lg |
Большой модальный (шире, чем по умолчанию) | Modals | |
.modal-sm |
Малый модальный (меньше ширины) | Modals | |
.m-# / m-*-# |
Адаптивные классы маржи. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.mt-# / mt-*-# |
Адаптивные верхние классы маржи. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.mb-# / mb-*-# |
Адаптивные классы нижнего поля. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.ml-# / ml-*-# |
Адаптивные классы левого поля. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.mr-# / mr-*-# |
Адаптивные правильные классы маржи. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.mx-# / mx-*-# |
Адаптивные левый и правый поля автоматических (горизонтальных) классов. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.my-# / my-*-# |
Адаптивные верхние и нижние поля автоматических (вертикальных) классов. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.mx-auto |
Выравнивание элемента по горизонтали | Utilities | |
.nav nav-tabs |
Создание меню с вкладками | Tabs | |
.nav nav-pills |
Создает меню таблетки | Tabs | |
.nav-justified |
Выравнивает ссылки табуляции/таблеток с одинаковой шириной | Tabs | |
.navbar |
Создание панели навигации | Navbar | |
.navbar-nav |
Контейнер для навигационных ссылок внутри контейнера. навигационной панели | Navbar | |
.navbar-brand |
Добавляется к ссылке или элементу заголовка внутри навигационной страницы для представления логотипа или заголовка | Navbar | |
.navbar-collapse |
Сворачивает навигационной панели (скрытые и заменены меню/гамбургер значок на мобильных телефонах и малых таблеток) | Navbar | |
.navbar-expand-* |
Отзывчивый складной класс-стеки навигационной вертикально на малых (SM), средний (MD), большой (LG) или очень большой (XL) экраны | Navbar | |
.navbar-dark |
Добавление цвета белого текста ко всем ссылкам в навигационной области | Navbar | |
.navbar-light |
Добавление черного цвета текста ко всем ссылкам в навигационной области | Navbar | |
.navbar-text |
Вертикальное выравнивание любых элементов внутри навигационной области, которые не являются связями (обеспечивает правильное заполнение) | Navbar | |
.navbar-toggler |
Стили кнопки, которые должны открыть панели навигации на небольших экранах. Автоматический стиль как гамбургер/три бара | Navbar | |
.navlink |
Используется для стиль ссылки/якоря внутри навигационной | Navbar | |
.nav-item |
Используется для стилей элементов списка внутри навигационной области | Navbar | |
.no-gutters |
Удаление водосточных желобов/дополнительное пространство из столбцов | Grid System | |
.page-item |
Элементы списка стилей внутри разбиения на страницы | Pagination | |
.page-link |
Стили ссылки внутри разбиения на страницы | Pagination | |
.pagination |
Создает разбиение на страницы (полезно, когда у вас есть веб-сайт с большим количеством страниц | Pagination | |
.pagination-lg |
Большая разбивка на страницы (каждая разбивка по ссылкам получает больший размер шрифта и более обивка) | Pagination | |
.pagination-sm |
Малые разбиения на страницы (каждая разбивка на страницы получает меньший размер шрифта и меньше обивка) | Pagination | |
.pre-scrollable |
Делает <pre> элемент прокручиваемым ( max-height 350 пикселей и предоставляет полосу прокрутки по оси y) |
Helpers | |
.progress |
Контейнер для индикаторов выполнения | Progress Bars | |
.progress-bar |
Создает индикатор выполнения | Progress Bars | |
.progress-bar-animated |
Анимация индикатора выполнения (используется вместе с полосками) | Progress Bars | |
.progress-bar-striped |
Добавляет полосы на индикатор выполнения | Progress Bars | |
.p-# / p-*-# |
Адаптивные классы заполнения. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.pt-# / pt-*-# |
Адаптивные верхние классы заполнения. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.pb-# / pb-*-# |
Адаптивные классы заполнения нижних полей. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.pl-# / pl-*-# |
Адаптивные классы заполнения левого поля. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.pr-# / pr-*-# |
Адаптивные правильные классы заполнения. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.py-# / py-*-# |
Адаптивные классы заполнения верхнего и нижнего полей. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.px-# / px-*-# |
Адаптивные классы заполнения левого и правого полей. * can be sm, md, lg or xl. # может быть числом от 0 до 5 | Utilities | |
.rounded |
Добавление скругленных углов к элементу | Utilities | |
.rounded-bottom |
Добавление скругленных углов снизу к элементу | Utilities | |
.rounded-circle |
Формирует элемент в окружность (не поддерживается в IE8 и более ранних версиях) | Utilities | |
.rounded-left |
Добавляет левый закругленный угол элемента | Utilities | |
.rounded-right |
Добавление скругленных углов вправо к элементу | Utilities | |
.rounded-top |
Добавление верхних скругленных углов к элементу | Utilities | |
.rounded-0 |
Удаление скругленных углов из элемента | Utilities | |
.row |
Контейнер для отзывчивых столбцов | Grid System | |
.shadow |
Добавление тени к элементу | Utilities | |
.shadow-lg |
Добавление большой тени к элементу | Utilities | |
.shadow-md |
Добавление средней тени к элементу | Utilities | |
.shadow-none |
Удаление теней из элемента | Utilities | |
.shadow-sm |
Добавление небольшой тени к элементу | Utilities | |
.small |
Создает светлый, дополнительный текст в любом заголовке | Typography | |
.sr-only |
Скрытие элемента на всех устройствах, Кроме программ чтения с экрана | Helpers | |
.sr-only-focusable |
Скрытие элемента на всех устройствах, Кроме программ чтения с экрана | Helpers | |
.sticky-top |
Делает элемент оставаться липким/фиксированной в верхней части страницы, когда вы прокрутите мимо него | Utilities | |
.tab-content |
Используется вместе с .tab-pane для создания переключаемых/динамических вкладок/таблетки |
Tabs | |
.tab-pane |
Используется вместе с .tab-content для создания переключаемых/динамических вкладок/таблетки |
Tabs | |
.table |
Добавление базовой стилизации в таблицу (заполнение, нижние границы и т.д.) | Tables | |
.table-active |
Добавляет серый цвет фона в строку таблицы ( <tr> или ячейку таблицы ( <td> ) (тот же цвет используется при наведении) |
Tables | |
.table-bordered |
Добавляет границы со всех сторон таблицы и ячеек | Tables | |
.table-bordered |
Удаление Бродов из таблицы | Tables | |
.table-condensed |
Делает таблицу более компактной, сокращая заполнение ячеек пополам | Tables | |
.table-dark |
Добавление черного фона с белым текстом в таблицу | Tables | |
.table-hover |
Создает парящую таблицу (добавляет серый цвет фона на строках таблицы при наведении) | Tables | |
.table-responsive-* |
Делает таблицу отзывчивой (при необходимости добавляет горизонтальную полосу прокрутки). По умолчанию полоса прокрутки добавляется в таблицу на экранах, которые меньше, чем 992пкс Wide (при необходимости). Там нет разницы при просмотре ничего лагере, чем 992пкс широкий. Однако, вы можете использовать SM | MD | LG | XL, чтобы решить, когда таблица должна получить полосу прокрутки, в зависимости от ширины экрана | Tables | |
.table-striped |
Добавление в таблицу Зебра-полос | Tables | |
.text-capitalize |
Обозначает текст с прописными буквами | Typography | |
.text-center |
Выравнивание текста по центру | Typography | |
.text-*-center |
Центрировать-выравнивание текста по разным экранам | Typography | |
.text-danger |
Красный цвет текста. Указывает на опасность | Colors | |
.text-dark |
Темно-серый цвет текста | Typography | |
.text-hide |
Скрытие текста (помогает заменить текстовое содержимое элемента фоновым изображением) | Typography | |
.text-info |
Светло-голубой цвет текста. Указывает информацию | Colors | |
.text-light |
Светло-серый цвет текста | Colors | |
.text-justify |
Обозначает обоснованный текст | Typography | |
.text-left |
Выравнивание текста по левому краю | Typography | |
.text-*-left |
Выравнивание текста по левому краю на разных экранах | Typography | |
.text-lowercase |
Изменяет текст на нижний регистр | Typography | |
.text-muted |
Серый цвет текста | Colors | |
.text-nowrap |
Предотвращает перенос текста | Typography | |
.text-primary |
Синий цвет текста. Указывает что-то важное | Colors | |
.text-secondary |
Серый цвет текста. Указывает что-то "менее" важно | Colors | |
.text-right |
Выравнивание текста по правому краю | Typography | |
.text-*-right |
Выравнивание текста по правому краю на разных экранах | Typography | |
.text-success |
Зеленый цвет текста. Указывает на успех | Colors | |
.text-uppercase |
Делает текст прописным | Typography | |
.text-warning |
Желтый/оранжевый цвет текста. Указывает предупреждение | Colors | |
.text-white |
Белый цвет текста | Colors | |
.thead-dark |
Добавляет черный цвет фона в заголовки таблицы | Tables | |
.thead-light |
Добавление серого цвета фона в заголовки таблицы | Tables | |
.visible |
Сделать видимым элемент | Utilities | |
.w-25 |
Задает ширину элемента 25% | Utilities | |
.w-50 |
Устанавливает ширину элемента до 50% | Utilities | |
.w-75 |
Устанавливает ширину элемента до 75% | Utilities | |
.w-100 |
Устанавливает ширину элемента до 100% | Utilities |