საზღვრები

გამოიყენეთ სასაზღვრო პროგრამები ელემენტის საზღვრებისა და საზღვრის რადიუსის სწრაფად სტილისთვის. შესანიშნავია სურათებისთვის, ღილაკებისთვის ან ნებისმიერი სხვა ელემენტისთვის.

ამ გვერდზე

საზღვარი

გამოიყენეთ სასაზღვრო პროგრამები ელემენტის საზღვრების დასამატებლად ან წასაშლელად. აირჩიეთ ყველა საზღვრებიდან ან ერთ დროს.

დანამატი

დაამატეთ საზღვრები მორგებულ ელემენტებს:

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>

გამჭვირვალობა

დამატებულია v5.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;
}

--bs-successჩვენ ვიყენებთ ჩვენი (მნიშვნელობით ) CSS ცვლადის RGB ვერსიას 25, 135, 84და ვამაგრებთ მეორე 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და მათი კონფიგურაცია შესაძლებელია Utilities 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;

სასი მიქსები

@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

სასაზღვრო კომუნალური მომსახურება გამოცხადებულია ჩვენს 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))
    ),