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

Bootstrap Borders (границы)

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

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

Границы

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

Additive (Добавка)

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

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>
Результат:

Subtractive

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

<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>
Результат:

Цвета

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

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

<span class="border border-primary"></span>
<span class="border border-primary-subtle"></span>
<span class="border border-secondary"></span>
<span class="border border-secondary-subtle"></span>
<span class="border border-success"></span>
<span class="border border-success-subtle"></span>
<span class="border border-danger"></span>
<span class="border border-danger-subtle"></span>
<span class="border border-warning"></span>
<span class="border border-warning-subtle"></span>
<span class="border border-info"></span>
<span class="border border-info-subtle"></span>
<span class="border border-light"></span>
<span class="border border-light-subtle"></span>
<span class="border border-dark"></span>
<span class="border border-dark-subtle"></span>
<span class="border border-black"></span>
<span class="border border-white"></span>
Результат:

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

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Эл. адрес</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Опасный заголовок
</div>

<div class="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-версию нашей --bs-success (со значением 25, 135, 84) переменной CSS и прикрепили вторую переменную CSS, --bs-border-opacity для альфа-прозрачности (со значением по умолчанию 1 благодаря локальной переменной CSS). Это означает, что в любое время, когда вы используете .border-success сейчас, ваше вычисленное color значение равно rgba(25, 135, 84, 1). Локальная переменная CSS внутри каждого .border-* класса позволяет избежать проблем с наследованием, поэтому вложенные экземпляры утилит не имеют автоматически измененной альфа-прозрачности.

Пример

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

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

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

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

Ширина

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>
Результат:

Радиус

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

<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">
Результат:
Example rounded image75x75 Example top rounded image75x75 Example right rounded image75x75 Example bottom rounded image75x75 Example left rounded image75x75 Completely round image75x75 Rounded pill image150x75

Размеры

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

<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">
Результат:
Example non-rounded image75x75 Example small rounded image75x75 Example default rounded image75x75 Example large rounded image75x75 Example larger rounded image75x75 Example extra large rounded image75x75 
<img src="..." class="rounded-bottom-1" alt="...">
<img src="..." class="rounded-start-2" alt="...">
<img src="..." class="rounded-end-circle" alt="...">
<img src="..." class="rounded-start-pill" alt="...">
<img src="..." class="rounded-5 rounded-top-0" alt="...">
Результат:
Example small rounded image75x75 Example default left rounded image75x75 Example right completely round image75x75 Example left rounded pill image75x75 Example extra large bottom rounded image75x75

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

API утилит Sass

Утилиты для создания границ объявлены в нашем 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-radius border-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-radius border-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-radius border-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-radius border-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)
  )
),