Bootstrap 4 Utilities
Утилиты Bootstrap 4
Bootstrap 4 имеет множество утилит/вспомогательных классов для быстрого стиля элементов без использования CSS-кода.
Границы
Используйте border классы для добавления или удаления границ элемента:
Пример
Пример
<span class="border"></span>
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-right-0"></span>
<span
class="border border-bottom-0"></span>
<span class="border border-left-0"></span>
Цвет границы
Добавьте цвет к границе с любым из контекстных классов цвета границы:
Пример
Пример
<span class="border border-primary"></span>
<span class="border
border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border
border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border
border-dark"></span>
<span class="border border-white"></span>
Радиус границы
Добавьте скругленные углы к элементу с помощью rounded классов:
Пример
Пример
<span class="rounded"></span>
<span class="rounded-top"></span>
<span class="rounded-right"></span>
<span
class="rounded-bottom"></span>
<span class="rounded-left"></span>
<span class="rounded-circle"></span>
<span
class="rounded-0"></span>
Поплавок и Clearfix
Float элемент вправо с .float-right классом или слева с .float-left, и очистить поплавки с .clearfix классом:
Пример
Пример
<div class="clearfix">
<span class="float-left">Float left</span>
<span
class="float-right">Float right</span>
</div>
Отзывчивые поплавки
Плавающий элемент влево или вправо в зависимости от ширины экрана, с адаптивными классами float (.float-*-left|right - where * is sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
Пример
Пример
<div class="float-sm-right">Float right on small screens or wider</div><br>
<div class="float-md-right">Float right on medium screens or wider</div><br>
<div class="float-lg-right">Float right on large screens or wider</div><br>
<div class="float-xl-right">Float right on extra large screens or
wider</div><br>
<div class="float-none">Float none</div>
Выравнивание по центру
Центрировать элемент с помощью .mx-auto класса (добавляет маржу-левое и правое поле: Auto):
Пример
Пример
<div class="mx-auto
bg-warning" style="width:150px">Centered</div>
Ширина
Задать ширину элемента с классами w-* (.w-25, .w-50, .w-75, .w-100, .mw-100):
Пример
Пример
<div class="w-25 bg-warning">Width 25%</div>
<div class="w-50 bg-warning">Width
50%</div>
<div class="w-75 bg-warning">Width 75%</div>
<div
class="w-100 bg-warning">Width 100%</div>
<div class="mw-100 bg-warning">Max Width 100%</div>
Высота
Задание высоты элемента с помощью классов h-* (.h-25, .h-50, .h-75, .h-100, .mh-100):
Пример
Пример
<div style="height:200px;background-color:#ddd">
<div class="h-25 bg-warning">Height 25%</div>
<div class="h-50 bg-warning">Height
50%</div>
<div class="h-75 bg-warning">Height 75%</div>
<div
class="h-100 bg-warning">Height 100%</div>
<div class="mh-100 bg-warning"
style="height:500px">Max Height 100%</div>
</div>
Интервал
Bootstrap 4 имеет широкий диапазон полезных классов для гибких полей и отступов.
Они работают для всех точек останова: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px) or xl (>=1200px)):
Классы используются в формате: {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Где свойство является одним из:
m- setsmarginp- setspadding
Где стороны один из:
t- setsmargin-toporpadding-topb- setsmargin-bottomorpadding-bottoml- setsmargin-leftorpadding-leftr- setsmargin-rightorpadding-rightx- sets bothpadding-leftandpadding-rightormargin-leftandmargin-righty- sets bothpadding-topandpadding-bottomormargin-topandmargin-bottom- blank - sets a
marginorpaddingon all 4 sides of the element
Где Размер является одним из:
0- setsmarginorpaddingto01- setsmarginorpaddingto.25rem(4px if font-size is 16px)2- setsmarginorpaddingto.5rem(8px if font-size is 16px)3- setsmarginorpaddingto1rem(16px if font-size is 16px)4- setsmarginorpaddingto1.5rem(24px if font-size is 16px)5- setsmarginorpaddingto3rem(48px if font-size is 16px)auto- setsmarginto auto
Пример
Пример
<div class="pt-4 bg-warning">I only have a top padding (1.5rem =
24px)</div>
<div class="p-5 bg-success">I have a padding on all sides
(3rem = 48px)</div>
<div class="m-5 pb-5 bg-info">I have a margin on
all sides (3rem = 48px) and a bottom padding (3rem = 48px)</div>
Дополнительные примеры интервалов
.m-# / m-*-# |
margin on all sides | |
.mt-# / mt-*-# |
margin top | |
.mb-# / mb-*-# |
margin bottom | |
.ml-# / ml-*-# |
margin left | |
.mr-# / mr-*-# |
margin right | |
.mx-# / mx-*-# |
margin left and right | |
.my-# / my-*-# |
margin top and bottom | |
.p-# / p-*-# |
padding on all sides | |
.pt-# / pt-*-# |
padding top | |
.pb-# / pb-*-# |
padding bottom | |
.pl-# / pl-*-# |
padding left | |
.pr-# / pr-*-# |
padding right | |
.py-# / py-*-# |
padding top and bottom | |
.px-# / px-*-# |
padding left and right |
Тени
Используйте shadow- классы для добавления теней к элементу:
Пример
Пример
<div class="shadow-none p-4 mb-4 bg-light">No shadow</div>
<div
class="shadow-sm p-4 mb-4 bg-white">Small
shadow</div>
<div class="shadow p-4 mb-4 bg-white">Default
shadow</div>
<div class="shadow-lg p-4 mb-4 bg-white">Large
shadow</div>
Выравнивание по вертикали
Используйте align- классы для изменения выравнивания элементов (работает только на встроенных, встроенных блоках, встроенных элементах таблицы и ячейках таблицы):
Пример
Пример
<span class="align-baseline">baseline</span>
<span
class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span
class="align-text-top">text-top</span>
<span
class="align-text-bottom">text-bottom</span>
Адаптивные встраивания
Создание адаптивного видео или слайд-шоу встраивается в зависимости от ширины родительского элемента.
Добавьте .embed-responsive-item к любым элементам встраивания (например, < IFRAME > или < Video >) в родительский элемент .embed-responsive и пропорции по вашему выбору:
Пример
<!-- 21:9 aspect ratio -->
<div class="embed-responsive
embed-responsive-21by9">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive
embed-responsive-16by9">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive
embed-responsive-4by3">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive
embed-responsive-1by1">
<iframe class="embed-responsive-item"
src="..."></iframe>
</div>
Видимость
Используйте .visible классы или .invisible для управления видимостью элементов. Примечание: Эти классы не меняют отображаемое значение CSS. Они только добавляют visibility:visible или visibility:hidden:
Пример
Пример
<div class="visible">I am visible</div>
<div class="invisible">I am
invisible</div>
Позиции
Используйте .fixed-top класс, чтобы сделать любой элемент фиксированным/пребывание в верхней части страницы:
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
</nav>
Используйте .fixed-bottom класс, чтобы сделать любой элемент фиксированным/остаться в нижней части страницы:
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
...
</nav>
Используйте .sticky-top класс, чтобы сделать любой элемент фиксированным/остаться в верхней части страницы, когда вы прокрутите его мимо. Примечание:
Этот класс не работает в Internet Explorer 11 и более ранних версиях (будет рассматривать его как position:relative ).
Пример
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
...
</nav>
Иконка закрыть
Используйте .close класс для оформления значка закрытия. Часто используется для оповещений и модальностей. Обратите внимание, что мы используем × символ, чтобы создать фактический значок (лучше лукионг "x"). Также обратите внимание, что он плавает вправо по умолчанию:
Пример
Пример
<button type="button" class="close">×</button>
Цвета
Как описано в разделе " цвета ", ниже приведен список всех классов текста и фона:
Классы для текстовых цветов: .text-muted,
.text-primary, .text-success, .text-info,
.text-warning, .text-danger, .text-secondary, .text-white,
.text-dark, .text-body (default body color/often black) and .text-light:
Пример
Этот текст отключен.
Этот текст важен.
Этот текст указывает на успех.
Этот текст представляет некоторую информацию.
Этот текст представляет предупреждение.
Этот текст представляет опасность.
Вторичный текст.
Темно-серый текст.
Основного текста.
Светло-серый текст.
Контекстные текстовые классы также можно использовать для ссылок, которые добавят более темный цвет наведения:
Пример
Вы также можете добавить 50% непрозрачность для черного или белого текста с .text-black-50 или .text-white-50 классов:
Пример
Черный текст с 50% непрозрачность на белом фоне
Белый текст с 50% непрозрачность на черном фоне
Цвета фона
Для цветов фона используются следующие классы: .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.
Типография/текстовые классы
Как описано в разделе типография, вот список всех типографий/текстовых классов:
| Класс | Описание | |
|---|---|---|
.display-* |
Отображаемые заголовки используются для выделять больше, чем обычные заголовки (больший размер шрифта и более легкий шрифт-вес), и есть четыре класса на выбор: .display-1, .display-2, .display-3, .display-4 |
|
.font-weight-bold |
Полужирный текст | |
.font-weight-normal |
Обычный текст | |
.font-weight-light |
Легковесный текст | |
.font-italic |
Курсивный текст | |
.lead |
Выделяет абзац | |
.small |
Обозначает меньший текст (значение 85% от размера родительского элемента) | |
.text-left |
Указывает текст, выровненный по левому краю | |
.text-center |
Обозначает текст, выровненный по центру | |
.text-right |
Указывает текст с выравниванием по правому краю | |
.text-justify |
Обозначает обоснованный текст | |
.text-monospace |
Текст с интервалом | |
.text-nowrap |
Обозначает отсутствие текста переноса | |
.text-lowercase |
Обозначает текст в нижнем регистре | |
.text-uppercase |
Указывает верхний текст | |
.text-capitalize |
Обозначает текст с прописными буквами | |
.initialism |
Отображение текста внутри <abbr> элемента в немного меньшем размере шрифта |
|
.list-unstyled |
Удаляет стандартный стиль списка и левое поле для элементов списка (работает на обоих <ul> и <ol> ). Этот класс применяется только к элементам списка непосредственных дочерних элементов (чтобы удалить стиль списка по умолчанию из любых вложенных списков, примените этот класс ко всем вложенным спискам) |
|
.list-inline |
Размещение всех элементов списка в одной строке (используется вместе с .list-inline-item каждым элементом <li>) |
|
.pre-scrollable |
Делает <pre> элемент прокручиваемым |
Элементы блока
Чтобы сделать элемент элементом Block, добавьте .d-block класс. Используйте любой из d-*-block классов для управления, когда элемент должен быть элементом блока на определенной ширине экрана:
Пример
Пример
<span class="d-block bg-success">d-block</span>
<span class="d-sm-block
bg-success">d-sm-block</span>
<span class="d-md-block bg-success">d-md-block</span>
<span class="d-lg-block bg-success">d-lg-block</span>
<span
class="d-xl-block bg-success">d-xl-block</span>
Flex
Используйте .flex-* классы для управления макетом с Flexbox.
Подробнее о Bootstrap 4 Flex читайте в следующей главе.
Пример
Horizontal:
Vertical: