දේශසීමා

මූලද්‍රව්‍යයක මායිම සහ මායිම් අරය ඉක්මනින් හැඩගැන්වීමට මායිම් උපයෝගිතා භාවිතා කරන්න. පින්තූර, බොත්තම් හෝ වෙනත් ඕනෑම අංගයක් සඳහා විශිෂ්ටයි.

මෙම පිටුවේ

මායිම

මූලද්‍රව්‍යයක මායිම් එක් කිරීමට හෝ ඉවත් කිරීමට මායිම් උපයෝගිතා භාවිතා කරන්න. සියලුම මායිම් වලින් හෝ එකින් එක තෝරන්න.

ආකලන

අභිරුචි අංග වෙත මායිම් එක් කරන්න:

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}උපයෝගිතා CSS විචල්‍යයන් භාවිතයෙන් Sass සමඟ ජනනය වේ. මෙය සම්පාදනය කිරීම සහ ගතික ඇල්ෆා විනිවිදභාවය වෙනස් කිරීමකින් තොරව තත්‍ය කාලීන වර්ණ වෙනස් කිරීමට ඉඩ සලසයි.

එය ක්රියා කරන ආකාරය

අපගේ පෙරනිමි .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 විචල්‍යයක් අමුණා ඇත ( දේශීය CSS විචල්‍යයකට ස්තූතිවන්ත වන පරිදි --bs-border-opacityපෙරනිමි අගයක් සමඟ ). 1ඒ කියන්නේ ඔබ .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සහ උපයෝගිතා 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);
  }
}

උපයෝගිතා 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))
    ),