Ahye a ɛwɔ hɔ

Fa border utilities di dwuma de yɛ element bi border ne border-radius no ntɛmntɛm. Great ma mfonini ahorow, buttons, anaa element foforo biara.

Wɔ kratafa yi so

Hyeɛ so

Fa border utilities di dwuma de fa element bi borders ka ho anaa yi fi hɔ. Paw fi ahye nyinaa mu anaa biako biara.

Nneɛma a wɔde ka ho

Fa borders ka custom elements ho:

html na ɛwɔ hɔ

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

Nneɛma a wɔtwe fi mu

Anaasɛ yi ahye ahorow no fi hɔ:

html na ɛwɔ hɔ

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

Ahosuo

Sesa border color no denam utilities a wɔasisi wɔ yɛn theme colors so no so.

html na ɛwɔ hɔ

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

Anaasɛ sesa default border-colora ɛwɔ component bi mu no:

Email address a wɔde di dwuma

Asɛmti a asiane wom

Ɔhye no kɔla ne ne tɛtrɛtɛ a wɔresakra

html na ɛwɔ hɔ

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

Opacity a ɛwɔ hɔ

Wɔde aka ho wɔ v5.2.0 mu

border-{color}Wɔde Sass na ɛyɛ Bootstrap utilities denam CSS variables so. Wei ma kwan ma wɔsesa kɔla wɔ bere ankasa mu a wɔmfa compilation ne dynamic alpha transparency nsakrae nka ho.

Sɛnea ɛyɛ adwuma

Susuw yɛn default .border-successutility no ho hwɛ.

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

Yɛde yɛn --bs-success(a ɛwɔ boɔ a ɛyɛ 25, 135, 84) CSS nsakraeɛ no RGB nkyerɛaseɛ di dwuma na yɛde CSS nsakraeɛ a ɛtɔ so mmienu, --bs-border-opacity, ka ho ma alpha transparency (a ɛwɔ default botaeɛ 1aseda ma mpɔtam hɔ CSS nsakraeɛ). Ɛno kyerɛ sɛ bere biara a wode bedi dwuma .border-successmprempren no, wo colorbo a wɔabɔ ho akontaa no yɛ rgba(25, 135, 84, 1). Mpɔtam hɔ CSS nsakraeɛ a ɛwɔ .border-*adesua biara mu no kwati agyapadeɛ ho nsɛm enti nested instances a ɛwɔ utilities no ntumi nnya alpha transparency a wɔasesa no ankasa.

Nhwɛsoɔ

Sɛ wopɛ sɛ wosakra saa opacity no a, --bs-border-opacityfa custom styles anaa inline styles so twa so.

Eyi yɛ default nkonimdi hye

Eyi yɛ 50% opacity nkonimdi hye

html na ɛwɔ hɔ

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

Anaasɛ, paw nneɛma a .border-opacitywɔde di dwuma no mu biara:

Eyi yɛ default nkonimdi hye

Eyi yɛ 75% opacity nkonimdi hye

Eyi yɛ 50% opacity nkonimdi hye

Eyi yɛ 25% opacity nkonimdi hye

Eyi yɛ 10% opacity nkonimdi hye

html na ɛwɔ hɔ

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

Ntrɛmu

html na ɛwɔ hɔ

<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 a ɛwɔ hɔ

Fa adesua ahorow ka element bi ho ma ɛnyɛ den sɛ ɛbɛbɔ ne ntwea so.

html na ɛwɔ hɔ

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

Nneɛma akɛse

Fa scaling classes no di dwuma ma ntwea akɛse anaa nketewa a ɛyɛ kurukuruwa. Sizes firi 0kɔsi 5, na wobɛtumi asiesie denam nsakraeɛ a wobɛsesa utilities API no so.

html na ɛwɔ hɔ

<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 a ɛwɔ hɔ no

Nneɛma a Ɛsakra

Wɔde aka ho wɔ v5.2.0 mu

  --#{$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 nsakrae ahorow

$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 mixins a wɔde yɛ nneɛma

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

Nneɛma a wɔde di dwuma API

Wɔabɔ border utilities ho dawuru wɔ yɛn utilities API mu wɔ scss/_utilities.scss. Sua sɛnea wode utilities API no bedi dwuma.

    "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))
    ),