ድንበሮች

የአንድን ንጥረ ነገር ድንበር እና ድንበር-ራዲየስ በፍጥነት ለመቅረጽ የድንበር መገልገያዎችን ይጠቀሙ። ለምስሎች፣ አዝራሮች ወይም ሌላ ማንኛውም አካል ምርጥ።

በዚህ ገጽ ላይ

ድንበር

የአንድን ንጥረ ነገር ድንበሮች ለመጨመር ወይም ለማስወገድ የድንበር መገልገያዎችን ይጠቀሙ። ከሁሉም ድንበሮች ወይም አንድ በአንድ ይምረጡ።

የሚጨምር

ወደ ብጁ አካላት ድንበሮችን አክል፡

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 ውስጥ ተጨምሯል

የቡትስትራፕ border-{color}መገልገያዎች የሲኤስኤስ ተለዋዋጮችን በመጠቀም በ Sass ይፈጠራሉ። ይህ ያለ ማጠናቀር እና ተለዋዋጭ የአልፋ ግልጽነት ለውጦች በእውነተኛ ጊዜ የቀለም ለውጦችን ይፈቅዳል።

እንዴት እንደሚሰራ

የእኛን ነባሪ .border-successመገልገያ ግምት ውስጥ ያስገቡ።

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

--bs-successየኛን (ከእሴቱ ጋር ) RGB ስሪት እንጠቀማለን 25, 135, 84እና ሁለተኛ CSS ተለዋዋጭ፣ --bs-border-opacity, ለአልፋ ግልጽነት (በነባሪው እሴት 1ለአካባቢው የCSS ተለዋዋጭ) አያይዘን እንጠቀማለን። ያ ማለት አሁን በሚጠቀሙበት በማንኛውም .border-successጊዜ፣ የእርስዎ የተሰላ colorዋጋ ነው rgba(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="...">

መጠኖች

ለትልቅ ወይም ትንሽ የተጠጋጉ ማዕዘኖች የመጠን ክፍሎችን ይጠቀሙ። መጠኖች ከ 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

ተለዋዋጮች

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

መገልገያዎች ኤፒአይ

የድንበር መገልገያዎች በእኛ መገልገያዎች ኤፒአይ ውስጥ ይታወቃሉ scss/_utilities.scss። የመገልገያ ኤፒአይን እንዴት መጠቀም እንደሚችሉ ይወቁ።

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