Границы

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

alrosadiamond.ru

Золотые браслеты с бриллиантами от ALROSA Diamonds

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

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

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

Добавление

Добавьте границы к пользовательским элементам:

html

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

Вычитание

Или удалить границы:

html

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

Цвет

Утилиты границ, такие как .border-*, сгенерированные из нашей исходной карты $theme-colors, еще не реагируют на цветовые режимы, однако любая утилита будет .border-*-subtle. Это будет решено в v6.

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

html

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

Или измените border-color компонента по умолчанию:

Адрес электронной почты

Опасный заголовок

Изменение цвета и ширины границы

html

<divclass="mb-4"><labelfor="exampleFormControlInput1"class="form-label">Адрес электронной почты</label><inputtype="email"class="form-control border-success"id="exampleFormControlInput1"placeholder="name@example.com"></div><divclass="h4 pb-2 mb-4 text-danger border-bottom border-danger"> Опасный заголовок
</div><divclass="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end"> Изменение цвета и ширины границы
</div>

Непрозрачность

Добавлено в версии 5.2.0

Утилиты Bootstrap border-{color} генерируются с помощью Sass с использованием переменных CSS. Это позволяет изменять цвет в реальном времени без компиляции и динамических изменений альфа-прозрачности.

Как это устроено

Рассмотрим нашу стандартную утилиту .border-success.

.border-success{--bs-border-opacity:1;border-color:rgba(var(--bs-success-rgb),var(--bs-border-opacity))!important;}

Мы используем RGB-версию нашей переменной CSS --bs-success (со значением 25, 135, 84) и присоединяем вторую переменную CSS, --bs-border-opacity, для альфа-прозрачности. (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что каждый раз, когда вы сейчас используете .border-success, ваше вычисленное значение color равно rgba(25, 135, 84, 1). Локальная переменная CSS внутри каждого класса .border-* позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют измененной альфа-прозрачности автоматически.

Пример

Чтобы изменить эту непрозрачность, переопределите --bs-border-opacity с помощью пользовательских стилей или встроенных стилей.

Это граница успеха по умолчанию

Это граница успеха с непрозрачностью 50%

html

<divclass="border border-success p-2 mb-2">Это граница успеха по умолчанию</div><divclass="border border-success p-2"style="--bs-border-opacity: .5;">Это граница успеха с непрозрачностью 50%</div>

Или выберите любую из утилит .border-opacity:

Это граница успеха по умолчанию

Это граница успеха с непрозрачностью 75%

Это граница успеха с непрозрачностью 50%

Это граница успеха с непрозрачностью 25%

Это граница успеха с непрозрачностью 10%

html

<divclass="border border-success p-2 mb-2">Это граница успеха по умолчанию</div><divclass="border border-success p-2 mb-2 border-opacity-75">Это граница успеха с непрозрачностью 75%</div><divclass="border border-success p-2 mb-2 border-opacity-50">Это граница успеха с непрозрачностью 50%</div><divclass="border border-success p-2 mb-2 border-opacity-25">Это граница успеха с непрозрачностью 25%</div><divclass="border border-success p-2 border-opacity-10">Это граница успеха с непрозрачностью 10%</div>

Ширина

html

<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>

Радиус

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

html

<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 до 5 и могут быть настроены путем изменения API утилит.

html

<imgsrc="..."class="rounded-0"alt="..."><imgsrc="..."class="rounded-1"alt="..."><imgsrc="..."class="rounded-2"alt="..."><imgsrc="..."class="rounded-3"alt="..."><imgsrc="..."class="rounded-4"alt="..."><imgsrc="..."class="rounded-5"alt="...">

html

<imgsrc="..."class="rounded-bottom-1"alt="..."><imgsrc="..."class="rounded-start-2"alt="..."><imgsrc="..."class="rounded-end-circle"alt="..."><imgsrc="..."class="rounded-start-pill"alt="..."><imgsrc="..."class="rounded-5 rounded-top-0"alt="...">

CSS

Переменные

Добавлено в версии 5.2.0

scss/_root.scss

--#{$prefix}border-width:#{$border-width};--#{$prefix}border-style:#{$border-style};--#{$prefix}border-color:#{$border-color};--#{$prefix}border-color-translucent:#{$border-color-translucent};--#{$prefix}border-radius:#{$border-radius};--#{$prefix}border-radius-sm:#{$border-radius-sm};--#{$prefix}border-radius-lg:#{$border-radius-lg};--#{$prefix}border-radius-xl:#{$border-radius-xl};--#{$prefix}border-radius-xxl:#{$border-radius-xxl};--#{$prefix}border-radius-2xl:var(--#{$prefix}border-radius-xxl);// Deprecated in v5.3.0 for consistency
--#{$prefix}border-radius-pill:#{$border-radius-pill};

Sass переменные

scss/_variables.scss

$border-width:1px;$border-widths:(1:1px,2:2px,3:3px,4:4px,5:5px);$border-style:solid;$border-color:$gray-300;$border-color-translucent:rgba($black,.175);

scss/_variables.scss

$border-radius:.375rem;$border-radius-sm:.25rem;$border-radius-lg:.5rem;$border-radius-xl:1rem;$border-radius-xxl:2rem;$border-radius-pill:50rem;

Переменные для установки border-color в утилитах .border-*-subtle в светлом и темном режимах:

scss/_variables.scss

$primary-border-subtle:tint-color($primary,60%);$secondary-border-subtle:tint-color($secondary,60%);$success-border-subtle:tint-color($success,60%);$info-border-subtle:tint-color($info,60%);$warning-border-subtle:tint-color($warning,60%);$danger-border-subtle:tint-color($danger,60%);$light-border-subtle:$gray-200;$dark-border-subtle:$gray-500;

scss/_variables-dark.scss

$primary-border-subtle-dark:shade-color($primary,40%);$secondary-border-subtle-dark:shade-color($secondary,40%);$success-border-subtle-dark:shade-color($success,40%);$info-border-subtle-dark:shade-color($info,40%);$warning-border-subtle-dark:shade-color($warning,40%);$danger-border-subtle-dark:shade-color($danger,40%);$light-border-subtle-dark:$gray-700;$dark-border-subtle-dark:$gray-800;

Sass карта

Адаптивные цвета границ цветового режима также доступны в виде карты Sass:

scss/_maps.scss

$theme-colors-border-subtle:("primary":$primary-border-subtle,"secondary":$secondary-border-subtle,"success":$success-border-subtle,"info":$info-border-subtle,"warning":$warning-border-subtle,"danger":$danger-border-subtle,"light":$light-border-subtle,"dark":$dark-border-subtle,);

scss/_maps.scss

$theme-colors-border-subtle-dark:("primary":$primary-border-subtle-dark,"secondary":$secondary-border-subtle-dark,"success":$success-border-subtle-dark,"info":$info-border-subtle-dark,"warning":$warning-border-subtle-dark,"danger":$danger-border-subtle-dark,"light":$light-border-subtle-dark,"dark":$dark-border-subtle-dark,);

Sass миксины

scss/mixins/_border-radius.scss

@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);}}

Sass API утилиты

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

scss/_utilities.scss

"border":(property:border,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-top":(property:border-top,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-end":(property:border-right,class:border-end,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-bottom":(property:border-bottom,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-start":(property:border-left,class:border-start,values:(null:var(--#{$prefix}border-width)var(--#{$prefix}border-style)var(--#{$prefix}border-color),0:0,)),"border-color":(property:border-color,class:border,local-vars:("border-opacity":1),values:$utilities-border-colors),"subtle-border-color":(property:border-color,class:border,values:$utilities-border-subtle),"border-width":(property:border-width,class:border,values:$border-widths),"border-opacity":(css-var:true,class:border-opacity,values:(10:.1,25:.25,50:.5,75:.75,100:1)),

scss/_utilities.scss

"rounded":(property:border-radius,class:rounded,values:(null:var(--#{$prefix}border-radius),0:0,1:var(--#{$prefix}border-radius-sm),2:var(--#{$prefix}border-radius),3:var(--#{$prefix}border-radius-lg),4:var(--#{$prefix}border-radius-xl),5:var(--#{$prefix}border-radius-xxl),circle:50%,pill:var(--#{$prefix}border-radius-pill))),"rounded-top":(property:border-top-left-radiusborder-top-right-radius,class:rounded-top,values:(null:var(--#{$prefix}border-radius),0:0,1:var(--#{$prefix}border-radius-sm),2:var(--#{$prefix}border-radius),3:var(--#{$prefix}border-radius-lg),4:var(--#{$prefix}border-radius-xl),5:var(--#{$prefix}border-radius-xxl),circle:50%,pill:var(--#{$prefix}border-radius-pill))),"rounded-end":(property:border-top-right-radiusborder-bottom-right-radius,class:rounded-end,values:(null:var(--#{$prefix}border-radius),0:0,1:var(--#{$prefix}border-radius-sm),2:var(--#{$prefix}border-radius),3:var(--#{$prefix}border-radius-lg),4:var(--#{$prefix}border-radius-xl),5:var(--#{$prefix}border-radius-xxl),circle:50%,pill:var(--#{$prefix}border-radius-pill))),"rounded-bottom":(property:border-bottom-right-radiusborder-bottom-left-radius,class:rounded-bottom,values:(null:var(--#{$prefix}border-radius),0:0,1:var(--#{$prefix}border-radius-sm),2:var(--#{$prefix}border-radius),3:var(--#{$prefix}border-radius-lg),4:var(--#{$prefix}border-radius-xl),5:var(--#{$prefix}border-radius-xxl),circle:50%,pill:var(--#{$prefix}border-radius-pill))),"rounded-start":(property:border-bottom-left-radiusborder-top-left-radius,class:rounded-start,values:(null:var(--#{$prefix}border-radius),0:0,1:var(--#{$prefix}border-radius-sm),2:var(--#{$prefix}border-radius),3:var(--#{$prefix}border-radius-lg),4:var(--#{$prefix}border-radius-xl),5:var(--#{$prefix}border-radius-xxl),circle:50%,pill:var(--#{$prefix}border-radius-pill))),