Хил

Элементийн хүрээ болон хүрээний радиусыг хурдан хэвлэхийн тулд хилийн хэрэгслүүдийг ашиглана уу. Зураг, товчлуур эсвэл бусад элементүүдэд тохиромжтой.

Энэ хуудсан дээр

Хил

Элементийн хүрээ нэмэх эсвэл хасахын тулд хилийн хэрэгслүүдийг ашиглана уу. Бүх хил хязгаараас эсвэл нэг нэгээр нь сонгоно уу.

Нэмэлт

Захиалгат элементүүдэд хүрээ нэмэх:

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 хувилбар дээр нэмсэн

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

Бид альфа ил тод байдлын хувьд ( локал CSS хувьсагчийн ачаар өгөгдмөл утгатай) CSS хувьсагчийн --bs-success(-ын утгатай 25, 135, 84) RGB хувилбарыг ашиглаж, хоёр дахь CSS хувьсагчийг хавсаргасан . Энэ нь та одоо ашиглах бүрт таны тооцоолсон утга байна гэсэн үг . Анги бүр доторх локал CSS хувьсагч нь өв залгамжлалын асуудлаас зайлсхийдэг тул хэрэгслүүдийн үүрлэсэн тохиолдлууд автоматаар өөрчлөгдсөн альфа ил тод байдалгүй болно.--bs-border-opacity1.border-successcolorrgba(25, 135, 84, 1).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="...">

Хэмжээ

Том эсвэл жижиг дугуйрсан булангийн хувьд масштабын ангиллыг ашиглана уу. Хэмжээ нь -ээс хооронд хэлбэлздэг бөгөөд 0API 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};

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

Хилийн хэрэгслүүдийг манай хэрэгслүүдийн 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))
    ),