1111
Перейти к основному содержаниюПерейти к навигации по документам
Cмотреть на GitHub

Границы

Используйте утилиты границ, чтобы быстро создать границу и граничный радиус элемента. Отлично подходит для изображений, кнопок или любого другого элемента.

На этой странице

Границы элемента

Используйте служебные программы для создания границ, чтобы добавить или удалить границы элемента. Выбирайте из всех границ или по одной.

Добавочный

<spanclass="border"></span><spanclass="border-top"></span><spanclass="border-end"></span><spanclass="border-bottom"></span><spanclass="border-start"></span>

Усеченный

<spanclass="border-0"></span><spanclass="border-top-0"></span><spanclass="border-end-0"></span><spanclass="border-bottom-0"></span><spanclass="border-start-0"></span>

Цвета границ

Измените цвет границы с помощью утилит, основанных на цветах нашей темы.

<spanclass="border border-primary"></span><spanclass="border border-secondary"></span><spanclass="border border-success"></span><spanclass="border border-danger"></span><spanclass="border border-warning"></span><spanclass="border border-info"></span><spanclass="border border-light"></span><spanclass="border border-dark"></span><spanclass="border border-white"></span>

Ширина рамки

<spanclass="border border-1"></span><spanclass="border border-2"></span><spanclass="border border-3"></span><spanclass="border border-4"></span><spanclass="border border-5"></span>

Границы радиуса

Добавьте классы к элементу, чтобы легко изменить его углы.

Example rounded image75x75Example top rounded image75x75Example right rounded image75x75Example bottom rounded image75x75Example left rounded image75x75Completely round image75x75Rounded pill image150x75
<imgsrc="..."class="rounded"alt="..."><imgsrc="..."class="rounded-top"alt="..."><imgsrc="..."class="rounded-end"alt="..."><imgsrc="..."class="rounded-bottom"alt="..."><imgsrc="..."class="rounded-start"alt="..."><imgsrc="..."class="rounded-circle"alt="..."><imgsrc="..."class="rounded-pill"alt="...">

Размер

Используйте классы масштабирования для больших или меньших закругленных углов. Размеры варьируются от 0 до 3 и могут быть настроены путем изменения API утилит.

Example non-rounded image75x75Example small rounded image75x75Example default rounded image75x75Example large rounded image75x75
<imgsrc="..."class="rounded-0"alt="..."><imgsrc="..."class="rounded-1"alt="..."><imgsrc="..."class="rounded-2"alt="..."><imgsrc="..."class="rounded-3"alt="...">

Sass

Переменные

$border-width:1px;$border-widths:(1:1px,2:2px,3:3px,4:4px,5:5px);$border-color:$gray-300;
$border-radius:.25rem;$border-radius-sm:.2rem;$border-radius-lg:.3rem;$border-radius-pill:50rem;

Миксины

@mixin border-radius($radius:$border-radius,$fallback-border-radius:false){@if$enable-rounded{border-radius:valid-radius($radius);}@else if$fallback-border-radius!=false{border-radius:$fallback-border-radius;}}@mixin border-top-radius($radius:$border-radius){@if$enable-rounded{border-top-left-radius:valid-radius($radius);border-top-right-radius:valid-radius($radius);}}@mixin border-end-radius($radius:$border-radius){@if$enable-rounded{border-top-right-radius:valid-radius($radius);border-bottom-right-radius:valid-radius($radius);}}@mixin border-bottom-radius($radius:$border-radius){@if$enable-rounded{border-bottom-right-radius:valid-radius($radius);border-bottom-left-radius:valid-radius($radius);}}@mixin border-start-radius($radius:$border-radius){@if$enable-rounded{border-top-left-radius:valid-radius($radius);border-bottom-left-radius:valid-radius($radius);}}@mixin border-top-start-radius($radius:$border-radius){@if$enable-rounded{border-top-left-radius:valid-radius($radius);}}@mixin border-top-end-radius($radius:$border-radius){@if$enable-rounded{border-top-right-radius:valid-radius($radius);}}@mixin border-bottom-end-radius($radius:$border-radius){@if$enable-rounded{border-bottom-right-radius:valid-radius($radius);}}@mixin border-bottom-start-radius($radius:$border-radius){@if$enable-rounded{border-bottom-left-radius:valid-radius($radius);}}

API утилит

Пограничные утилиты объявлены в нашем API утилит в scss/_utilities.scss. Узнайте, как использовать API утилит.

"border":(property:border,values:(null:$border-widthsolid$border-color,0:0,)),"border-top":(property:border-top,values:(null:$border-widthsolid$border-color,0:0,)),"border-end":(property:border-right,class:border-end,values:(null:$border-widthsolid$border-color,0:0,)),"border-bottom":(property:border-bottom,values:(null:$border-widthsolid$border-color,0:0,)),"border-start":(property:border-left,class:border-start,values:(null:$border-widthsolid$border-color,0:0,)),"border-color":(property:border-color,class:border,values:map-merge($theme-colors,("white":$white))),"border-width":(property:border-width,class:border,values:$border-widths),
"rounded":(property:border-radius,class:rounded,values:(null:$border-radius,0:0,1:$border-radius-sm,2:$border-radius,3:$border-radius-lg,circle:50%,pill:$border-radius-pill)),"rounded-top":(property:border-top-left-radiusborder-top-right-radius,class:rounded-top,values:(null:$border-radius)),"rounded-end":(property:border-top-right-radiusborder-bottom-right-radius,class:rounded-end,values:(null:$border-radius)),"rounded-bottom":(property:border-bottom-right-radiusborder-bottom-left-radius,class:rounded-bottom,values:(null:$border-radius)),"rounded-start":(property:border-bottom-left-radiusborder-top-left-radius,class:rounded-start,values:(null:$border-radius)),
222