सीमाएं

इक तत्व दी सीमा ते सीमा-त्रिज्या गी जल्दी शैली बनाने लेई सीमा उपयोगिताएं दा उपयोग करो. छवियां, बटन, जां कुसै होर तत्व आस्तै शानदार।

इस पेज पर

सरहद्‌द

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

एडिटिव ऐ

कस्टम तत्वें च सीमाएं गी जोड़ो:

एचटीएमएल ऐ

<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}उपयोगिताएं गी 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 चर दी बदौलत इक डिफ़ॉल्ट मूल्य कन्नै)। मतलब जेकर तुस हून इस्तेमाल करदे ओ तां तुंदा गणना कीता गेदा मूल्य ऐ . हर वर्ग दे अंदर लोकल 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))
    ),