געמארקן

ניצן גרענעץ יוטילאַטיז צו געשווינד סטיל די גרענעץ און גרענעץ ראַדיוס פון אַן עלעמענט. גרויס פֿאַר בילדער, קנעפּלעך אָדער קיין אנדערע עלעמענט.

אויף דעם בלאַט

גרענעץ

ניצן גרענעץ יוטילאַטיז צו לייגן אָדער אַראָפּנעמען גרענעץ פון אַן עלעמענט. קלייַבן פון אַלע געמארקן אָדער איינער אין אַ צייט.

אַדאַטיוו

לייג געמארקן צו מנהג עלעמענטן:

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>

סובטראַקטיוו

אָדער אַראָפּנעמען גרענעצן:

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>

פאַרב

טוישן די גרענעץ קאָליר ניצן יוטילאַטיז געבויט אויף אונדזער טעמע פארבן.

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>

אָדער מאָדיפיצירן די פעליקייַט border-colorפון אַ קאָמפּאָנענט:

אימעיל אדרעס

געפערלעך כעדינג

טשאַנגינג גרענעץ קאָליר און ברייט

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>

אָופּאַסאַטי

צוגעגעבן אין וו5.2.0

באָאָטסטראַפּ 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דורך מנהג סטיילז אָדער ינלינע סטיילז.

דעם איז פעליקייַט הצלחה גרענעץ

דאָס איז 50% אָופּאַסאַטי הצלחה גרענעץ

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>

אָדער, קלייַבן פון קיין פון די .border-opacityיוטילאַטיז:

דעם איז פעליקייַט הצלחה גרענעץ

דאָס איז 75% אָופּאַסאַטי הצלחה גרענעץ

דאָס איז 50% אָופּאַסאַטי הצלחה גרענעץ

דאָס איז 25% אָופּאַסאַטי הצלחה גרענעץ

דאָס איז 10% אָופּאַסאַטי הצלחה גרענעץ

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>

ברייט

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>

ראַדיוס

לייג קלאסן צו אַן עלעמענט צו לייכט קייַלעכיק זייַן עקן.

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

סיזעס

ניצן די סקיילינג קלאסן פֿאַר גרעסערע אָדער קלענערער ראַונדיד עקן. סיזעס קייט פון 0צו 5, און קענען זיין קאַנפיגיערד דורך מאָדיפיצירן די יוטילאַטיז אַפּי.

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

וועריאַבאַלז

צוגעגעבן אין וו5.2.0

  --#{$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};

סאָס וועריאַבאַלז

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

סאַס מיקסינס

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

Utilities API

גרענעץ יוטילאַטיז זענען דערקלערט אין אונדזער יוטילאַטיז אַפּי אין scss/_utilities.scss. לערנען ווי צו נוצן די Utilities API.

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