in English

ބޯޑަރސް

އެލިމެންޓެއްގެ ބޯޑަރާއި ބޯޑަރ-ރޭޑިއަސް އަވަހަށް ސްޓައިލް ކުރުމަށް ބޯޑަރ ޔުޓިލިޓީސް ބޭނުން ކުރާށެވެ. ތަސްވީރުތަކާއި، ބަޓަންތަކާއި، ނުވަތަ އެހެން އެއްވެސް އުނިއިތުރަކަށް މޮޅު އެއްޗެކެވެ.

މި ޞަފްޙާގައެވެ

ބޯޑަރު

އެލިމެންޓެއްގެ ބޯޑަރުތައް އިތުރުކުރުމަށް ނުވަތަ ނައްތާލުމަށް ބޯޑަރ ޔުޓިލިޓީސް ބޭނުންކުރުން. ހުރިހާ ބޯޑަރެއްގެ ތެރެއިން ނުވަތަ އެއް ބޯޑަރުން އެއް ބޯޑަރު ހޮވާށެވެ.

އެޑިޓިވް އެވެ

ކަސްޓަމް އެލިމެންޓްތަކަށް ބޯޑަރުތައް އިތުރުކުރުން:

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

--bs-successއަޅުގަނޑުމެން އަޅުގަނޑުމެންގެ (ގެ އަގާއި އެކު ) ސީއެސްއެސް ވެރިއޭބަލްގެ އަރްޖީބީ ވަރޝަނެއް ބޭނުންކޮށް ، އަލްފާ ޓްރާންސްޕޭރެންސީއަށް ( ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލްއެއްގެ ސަބަބުން ޑިފޯލްޓް ވެލިއުއަކާއެކު) 25, 135, 84ދެވަނަ ސީއެސްއެސް ވެރިއޭބަލް، , އެޓޭޗް ކުރިން . މާނައަކީ މިހާރު ބޭނުންކުރާ ކޮންމެ ވަގުތެއްގައިވެސް، ތިބާގެ ޙިސާބުކުރެވިފައިވާ އަގަކީ . ކޮންމެ ކްލާހެއްގެ ތެރޭގައި ހުންނަ ލޯކަލް ސީއެސްއެސް ވެރިއޭބަލް އިންހެރިޓެންސް މައްސަލަތަކުން ދުރުހެލިވާތީ ޔުޓިލިޓީސްގެ ނެސްޓްޑް އިންސްޓޭންސްތަކުގައި އޮޓޮމެޓިކުން ބަދަލުކޮށްފައިވާ އަލްފާ ޓްރާންސްޕޭރެންސީއެއް ނެތެވެ.--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="...">

ސައިޒްތަކެވެ

ބޮޑެތި ނުވަތަ ކުދި ވަށައިގެންވާ ކޮޅުތަކަށް ސްކޭލިންގ ކްލާސްތައް ބޭނުން ކުރާށެވެ. ސައިޒްތައް ތަފާތުވަނީ 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))
    ),