چېگرا

چېگرا ئەسلىھەلىرىدىن پايدىلىنىپ ئېلېمېنتنىڭ چېگرا ۋە چېگرا رادىئوسىنى تېز ئۇسلۇب قىلىڭ. رەسىم ، كۇنۇپكا ياكى باشقا ئېلېمېنتلار ئۈچۈن ناھايىتى ياخشى.

بۇ بەتتە

چېگرا

ئېلېمېنتنىڭ چېگراسىنى قوشۇش ياكى چىقىرىۋېتىش ئۈچۈن چېگرا ئەسلىھەلىرىنى ئىشلىتىڭ. ھەر بىر چېگرادىن ياكى بىر قېتىمدىن تاللاڭ.

خۇرۇچ

ئىختىيارى ئېلېمېنتلارغا چېگرا قوشۇڭ:

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>

Subtractive

ياكى چېگرانى ئۆچۈرۈڭ:

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>

Opacity

V5.2.0 گە قوشۇلدى

Bootstrap border-{color}قورالى CSS ئۆزگەرگۈچى مىقدار ئارقىلىق Sass ئارقىلىق ھاسىل بولىدۇ. بۇ تۈزۈلۈش ۋە ھەرىكەتچان ئالفا سۈزۈكلۈكى بولماي تۇرۇپ ھەقىقىي رەڭ ئۆزگىرىشىگە يول قويىدۇ.

قانداق ئىشلەيدۇ

سۈكۈتتىكى .border-successئىشلىتىلىشىمىزنى ئويلاڭ.

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

بىز --bs-success(قىممىتى بىلەن 25, 135, 84) CSS ئۆزگەرگۈچى مىقدارنىڭ RGB نەشىرىنى ئىشلىتىمىز ۋە --bs-border-opacityئالفا سۈزۈكلىكى ئۈچۈن ( 1يەرلىك CSS ئۆزگەرگۈچى مىقدارنىڭ سۈكۈتتىكى قىممىتى بىلەن) ئىككىنچى 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>

Radius

بىر ئېلېمېنتقا دەرس قوشۇڭ ، ئۇنىڭ بۇلۇڭ-پۇچقاقلىرىنى ئاسانلا ئايلاندۇرىسىز.

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

Size

چوڭ ياكى كىچىك يۇمىلاق بۇلۇڭلارغا كىچىكلىتىش سىنىپىنى ئىشلىتىڭ. رازمېرىغىچە بولىدۇ 0، 5ھەمدە API نى ئۆزگەرتىش ئارقىلىق تەڭشىگىلى بولىدۇ.

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

ئۆزگەرگۈچى مىقدار

V5.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};

Sass ئۆزگەرگۈچى مىقدار

$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

@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

بىزنىڭ ئاممىۋى مۇلازىمەت API دىكى چېگرا ئەسلىھەلىرى ئېلان قىلىندى scss/_utilities.scss. 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))
    ),