Утилиты Bootstrap4

Bootstrap4 предоставляет некоторые утилиты, которые позволяют достигать желаемых эффектов без написания CSS-кода.

Границы

Используйте классborder, чтобы добавлять или удалять границы:

Пример

Попробуйте »

Цвет границы

Bootstrap4 предоставляет несколько классов для установки цвета границы:

Пример

Попробуйте »

Радиус границы

Используйтеroundedкласс может добавить скруглённые границы:

Пример

Попробуйте »

Float

.float-rightкласс используется для установки обтекания элемента справа,.float-leftустанавливает обтекание элемента слева,.clearfixкласс используется для очистки обтекания:

Пример

<div class="clearfix"> <span class="float-left">Обтекание слева</span> <span class="float-right">Обтекание справа</span> </div>

Попробуйте »

Адаптивные обтекания

Мы можем задать обтекание (.float-*-left|right- * может быть sm, md, lg или xl), направление зависит от размера экрана:

Пример

<div class="float-sm-right">Обтекание справа на экранах больше small</div><br> <div class="float-md-right">Обтекание справа на экранах больше medium</div><br> <div class="float-lg-right">Обтекание справа на экранах больше large</div><br> <div class="float-xl-right">Обтекание справа на экранах больше extra large</div><br> <div class="float-none">Без обтекания</div>

Попробуйте »

Выравнивание по центру

Используйте.mx-autoкласс для выравнивания по центру:

Пример

<div class="mx-auto bg-warning" style="width:150px">Центрировано</div>

Попробуйте »

Width

Используйте классы w-* для элементов (.w-25, .w-50, .w-75, .w-100, .mw-100), чтобы задать ширину:

Пример

<div class="w-25 bg-warning">Ширина 25%</div> <div class="w-50 bg-warning">Ширина 50%</div> <div class="w-75 bg-warning">Ширина 75%</div> <div class="w-100 bg-warning">Ширина 100%</div> <div class="mw-100 bg-warning">Максимальная ширина 100%</div>

Попробуйте »

Height

Используйте классы h-* для элементов (.h-25, .h-50, .h-75, .h-100, .mh-100), чтобы задать высоту:

Пример

<div style="height:200px;background-color:#ddd"> <div class="h-25 bg-warning">Высота 25%</div> <div class="h-50 bg-warning">Высота 50%</div> <div class="h-75 bg-warning">Высота 75%</div> <div class="h-100 bg-warning">Высота 100%</div> <div class="mh-100 bg-warning" style="height:500px">Максимальная высота 100%</div> </div>

Попробуйте »

Отступы

Синтаксис отступов следующий:

{property}{sides}-{size}  // 适用 xs(<=576px)
{property}{sides}-{breakpoint}-{size} // 适用 sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px)

контрольные точки относятся к ширине экрана: xs (<=576px), sm (>=576px), md (>=768px), lg (>=992px), xl (>=1200px).

propertyобозначает свойство, включая:

m- используется для установкиmargin
p- используется для установкиpadding

sidesв основном относится к направлению:

t- используется для установкиmargin-topилиpadding-top
b- используется для установкиmargin-bottomилиpadding-bottom
l- используется для установкиmargin-leftилиpadding-left
r- используется для установкиmargin-rightилиpadding-right
x- используется для установки*-leftи*-right
y- используется для установки*-topи*-bottom
пусто - используется для установки элемента во всех четырёх направленияхmarginилиpadding

sizeобозначает размер отступа:

0- установитьmarginилиpaddingявляется0
1- установитьmarginилиpaddingявляется$spacer * .25
2- установитьmarginилиpaddingявляется$spacer * .5
3- установитьmarginилиpaddingявляется$spacer
4- установитьmarginилиpaddingявляется$spacer * 1.5
5- установитьmarginилиpaddingявляется$spacer * 3
auto- установитьmarginв auto

marginmarginВы можете задавать отрицательные значения, добавив букву перед числом."n" :

n1- Установите margin в -.25rem (-4px, если font-size равен 16px)
n2- Установите margin в -.5rem (-8px, если font-size равен 16px)
n3- Установите margin в -1rem (-16px, если font-size равен 16px)
n4- Установите margin в -1.5rem (-24px, если font-size равен 16px)
n5- Установите margin в -3rem (-48px, если font-size равен 16px)

См. настройки исходного кода для некоторых отступов:

.mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Пример

<div class="mx-auto" style="width: 200px;">Центрируйте элемент</div> <form > <div class="form-row"> <div class="form-group"> <label for="text" class="mt-2">Установите margin-top:</label> <input type="text" class="form-control" id="text" placeholder="email"> <label for="color" class="mt-2">Цвета:</label> <input type="color" id="color" class="form-control" style="width: 60px;padding: 4px;" autocomplete="off" value="#656565"> </div> </div> </form>

Попробуйте »

Другие примеры

`.m-# / m-*-#`	Установите внешние отступы со всех сторон	Попробуйте
`.mt-# / mt-*-#`	внешний отступ сверху	Попробуйте
`.mb-# / mb-*-#`	внешний отступ снизу	Попробуйте
`.ml-# / ml-*-#`	внешний отступ слева	Попробуйте
`.mr-# / mr-*-#`	внешний отступ справа	Попробуйте
`.mx-# / mx-*-#`	margin слева и справа	Попробуйте
`.my-# / my-*-#`	margin сверху и снизу	Попробуйте
`.p-# / p-*-#`	Используйте стороны для установки padding	Попробуйте
`.pt-# / pt-*-#`	padding сверху	Попробуйте
`.pb-# / pb-*-#`	padding снизу	Попробуйте
`.pl-# / pl-*-#`	padding слева	Попробуйте
`.pr-# / pr-*-#`	padding справа	Попробуйте
`.py-# / py-*-#`	padding сверху и снизу	Попробуйте
`.px-# / px-*-#`	padding слева и справа	Попробуйте

Другие расширения