Liƒowo

Zã liƒo ƒe dɔwɔnuwo nàtsɔ awɔ akpa aɖe ƒe liƒo kple liƒo-radius ƒe atsyã kabakaba. Enyo ŋutɔ na nɔnɔmetatawo, abɔtawo, alo nu bubu ɖesiaɖe.

Le axa sia dzi

Liƒo

Zã liƒo ƒe dɔwɔnuwo nàtsɔ akpe ɖe akpa aɖe ƒe liƒowo ŋu alo aɖe wo ɖa. Tia liƒowo katã alo ɖeka ɖeka.

Nusi wotsɔ kpe ɖe eŋu

Tsɔ liƒowo kpe ɖe nusiwo wowɔ ɖe ɖoɖo nu ŋu:

html

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

Nusiwo woɖena ɖa

Alo ɖe liƒowo ɖa:

html

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

Amadede

Trɔ liƒoa ƒe amadede to dɔwɔnu siwo wotu ɖe míaƒe tanya ƒe amadedewo dzi zazã me.

html

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

Alo trɔ asi le border-colorakpa aɖe ƒe nɔnɔme si woɖo ɖi ŋu:

Email adrɛs

Tanya si me afɔku le

Liƒo ƒe amadede kple kekeme tɔtrɔ

html

<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

Nusiwo me mekɔ o

Wotsɔe kpe ɖe eŋu le v5.2.0 me

Wowɔa Bootstrap border-{color}dɔwɔnuwo kple Sass to CSS tɔtrɔwo zazã me. Esia ɖea mɔ na amadede ƒe tɔtrɔ le ɣeyiɣi ŋutɔŋutɔ me nuƒoƒoƒu kple alfa ƒe ʋuʋu ƒe tɔtrɔ si trɔna manɔmee.

Ale si wòwɔa dɔe

Bu míaƒe .border-successdɔwɔnu si míezãna ɖaa ŋu kpɔ.

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

Míezãa míaƒe --bs-success(si ƒe asixɔxɔ nye 25, 135, 84) CSS tɔtrɔ ƒe RGB tɔ eye míetsɔa CSS tɔtrɔ evelia kpena ɖe eŋu, --bs-border-opacity, na alfa ƒe ʋuʋu (kple asixɔxɔ gbãtɔ 1akpe ɖe teƒea ƒe CSS tɔtrɔ ŋu). Ema fia be ɣesiaɣi si nàzã .border-successfifia la, wò colorasixɔxɔ si wobu akɔntae nye rgba(25, 135, 84, 1). Nutoa me CSS tɔtrɔ si le .border-*klass ɖesiaɖe me ƒoa asa na domenyinu ƒe nyawo ale be nested instances of the utilities mekpɔa alpha transparency si woɖɔli le wo ɖokui si o.

Kpɔɖeŋu

Be nàtrɔ opacity ma la, ɖe asi le eŋu --bs-border-opacityto atsyã tɔxɛwo alo atsyã siwo le fli me dzi.

Esia nye dzidzedzekpɔkpɔ ƒe liƒo si woɖo ɖi

Esia nye 50% opacity dzidzedzekpɔkpɔ liƒo

html

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

Alo, tia .border-opacitynuzazãwo dometɔ ɖesiaɖe:

Esia nye dzidzedzekpɔkpɔ ƒe liƒo si woɖo ɖi

Esia nye 75% opacity dzidzedzekpɔkpɔ liƒo

Esia nye 50% opacity dzidzedzekpɔkpɔ liƒo

Esia nye 25% opacity dzidzedzekpɔkpɔ liƒo

Esia nye 10% opacity dzidzedzekpɔkpɔ liƒo

html

<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

Kekeme

html

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

Radius ƒe didime

Tsɔ klasswo kpe ɖe element aɖe ŋu be wòaƒo xlã eƒe dzogoewo bɔbɔe.

html

<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="...">

Agbɔsɔsɔmewo

Zã dzidzenu ƒe klasswo na dzogoe siwo lolo alo sue siwo le goglo. Agbɔsɔsɔmewo tso 0va ɖo 5, eye woateŋu aɖo wo to asitɔtrɔ le utilities API ŋu.

html

<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="...">

CSS ƒe ƒuƒoƒo

Nusiwo trɔna

Wotsɔe kpe ɖe eŋu le v5.2.0 me

  --#{$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-2xl: #{$border-radius-2xl};
  --#{$prefix}border-radius-pill: #{$border-radius-pill};

Sass ƒe tɔtrɔwo

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

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

Sass ƒe mixins

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

Dɔwɔnuwo ƒe API

Woɖe gbeƒã liƒo ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

    "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
    ),
    "border-width": (
      css-var: true,
      css-variable-name: 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
      )
    ),

    "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-2xl),
        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))
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
      values: (null: var(--#{$prefix}border-radius))
    ),