ዶባት

ንዶብን ዶብን-ራድዩስን ናይ ሓደ ባእታ ብቕልጡፍ ቅዲ ንምግባር ዶብ ዩቲሊቲታት ተጠቐም። ንስእልታት፡ መጠወቒታት፡ ወይ ንዝኾነ ካልእ ባእታ ብሉጽ እዩ።

ኣብዚ ገጽ

ዶብ

ናይ ሓደ ባእታ ዶባት ንምውሳኽ ወይ ንምእላይ ዶብ ዩቲሊቲታት ተጠቐም። ካብ ኩሉ ዶባት ወይ ሓደ ብሓደ ምረጽ።

ተወሰኽቲ

ናብ ብሕታዊ ባእታታት ዶባት ምውሳኽ፤

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}ዩቲሊቲታት ብሳስ ብሲኤስኤስ ተለዋዋጢ ረቛሒታት ተጠቒሞም ይፍጠሩ። እዚ ድማ ብዘይ ምትእኽኻብን ዳይናሚክ ኣልፋ ግሉጽነትን ለውጢ ኣብ ሓቀኛ ግዜ ሕብሪ ምቕያር የኽእል።

ከመይ ይሰርሕ

ነባሪ ዩቲሊቲና ንርአ .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% opacity ዓወት ዶብ እዩ።

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% opacity ዓወት ዶብ እዩ።

እዚ 50% opacity ዓወት ዶብ እዩ።

እዚ 25% opacity ዓወት ዶብ እዩ።

እዚ 10% opacity ዓወት ዶብ እዩ።

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

ሲኤስኤስ

ተለዋዋጢ ረቛሒታት

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

ሳስ ተለዋዋጢ ረቛሒታት

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