सीमा के बा

कवनो तत्व के सीमा आ सीमा-त्रिज्या के जल्दी से स्टाइल करे खातिर सीमा उपयोगिता के इस्तेमाल करीं। छवि, बटन, या कवनो अन्य तत्व खातिर बढ़िया।

एह पन्ना पर दिहल गइल बा

सरहद

कवनो तत्व के सीमा जोड़ल भा हटावे खातिर सीमा उपयोगिता सभ के इस्तेमाल करीं। सभ सीमा में से या एक-एक करके चुनीं।

एडिटिव के बा

कस्टम तत्व सभ में सीमा जोड़ल जाला:

एचटीएमएल के बा

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

घटाव के बा

या सीमा हटाईं:

एचटीएमएल के बा

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

रंग

हमनी के थीम रंग पर बनल उपयोगिता के उपयोग करके सीमा रंग बदलीं।

एचटीएमएल के बा

<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या फिर कौनों घटक के डिफ़ॉल्ट के संशोधित करीं :

ईमेल के पता बा

खतरनाक हेडिंग के बा

सीमा के रंग आ चौड़ाई बदलत बा

एचटीएमएल के बा

<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(के मान के साथ ) CSS चर के एगो RGB संस्करण के इस्तेमाल करेनी जा आ अल्फा पारदर्शिता खातिर 25, 135, 84एगो दूसरा CSS चर, , संलग्न कइले बानी जा (एक ठो स्थानीय CSS चर के बदौलत डिफ़ॉल्ट मान के साथ)। मतलब कि अब कबो भी रउआ इस्तेमाल करीं, रउआ गणना कइल मान . हर क्लास के अंदर के लोकल CSS चर विरासत के मुद्दा से बचेला एह से उपयोगिता सभ के नेस्टेड इंस्टेंस सभ में स्वचालित रूप से संशोधित अल्फा पारदर्शिता ना होखे।--bs-border-opacity1.border-successcolorrgba(25, 135, 84, 1).border-*

उदाहरण

ओह अस्पष्टता के बदले खातिर, --bs-border-opacityकस्टम स्टाइल भा इनलाइन स्टाइल के माध्यम से ओवरराइड करीं।

ई डिफ़ॉल्ट सफलता सीमा बा

ई 50% अस्पष्टता सफलता सीमा बा

एचटीएमएल के बा

<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% अस्पष्टता सफलता सीमा बा

एचटीएमएल के बा

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

चौड़ाई

एचटीएमएल के बा

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

त्रिज्या के बा

कवनो तत्व में क्लास जोड़ीं जेहसे कि ओकर कोना आसानी से गोल हो जाव.

एचटीएमएल के बा

<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, आ यूटिलिटीज एपीआई के संशोधित क के कॉन्फ़िगर कइल जा सके ला।

एचटीएमएल के बा

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