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
- setsmargin
p
- setspadding
Где стороны один из:
t
- setsmargin-top
orpadding-top
b
- setsmargin-bottom
orpadding-bottom
l
- setsmargin-left
orpadding-left
r
- setsmargin-right
orpadding-right
x
- sets bothpadding-left
andpadding-right
ormargin-left
andmargin-right
y
- sets bothpadding-top
andpadding-bottom
ormargin-top
andmargin-bottom
- blank - sets a
margin
orpadding
on all 4 sides of the element
Где Размер является одним из:
0
- setsmargin
orpadding
to0
1
- setsmargin
orpadding
to.25rem
(4px if font-size is 16px)2
- setsmargin
orpadding
to.5rem
(8px if font-size is 16px)3
- setsmargin
orpadding
to1rem
(16px if font-size is 16px)4
- setsmargin
orpadding
to1.5rem
(24px if font-size is 16px)5
- setsmargin
orpadding
to3rem
(48px if font-size is 16px)auto
- setsmargin
to 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: