सीमाओं

किसी तत्व के बॉर्डर और बॉर्डर-त्रिज्या को जल्दी से स्टाइल करने के लिए बॉर्डर यूटिलिटीज का उपयोग करें। छवियों, बटनों या किसी अन्य तत्व के लिए बढ़िया।

इस पृष्ठ पर

सीमा

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

additive

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

एचटीएमएल

<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 . में जोड़ा गया

CSS वेरिएबल्स का उपयोग करके Sass के साथ बूटस्ट्रैप 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-opacity(स्थानीय सीएसएस चर के लिए डिफ़ॉल्ट मान 1धन्यवाद के साथ)। इसका मतलब है कि जब भी आप अभी उपयोग करते .border-successहैं, तो आपका परिकलित colorमान rgba(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>

RADIUS

किसी तत्व के कोनों को आसानी से गोल करने के लिए उसमें कक्षाएं जोड़ें।

एचटीएमएल

<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. उपयोगिताओं 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))
    ),