सीमा

घटकाची सीमा आणि सीमा-त्रिज्या द्रुतपणे शैलीबद्ध करण्यासाठी सीमा उपयोगिता वापरा. प्रतिमा, बटणे किंवा इतर कोणत्याही घटकांसाठी उत्तम.

या पृष्ठावर

सीमा

घटकाच्या सीमा जोडण्यासाठी किंवा काढण्यासाठी बॉर्डर युटिलिटी वापरा. सर्व सीमांमधून किंवा एका वेळी एक निवडा.

जोडणारा

सानुकूल घटकांमध्ये सीमा जोडा:

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}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). प्रत्येक .border-*वर्गातील स्थानिक CSS व्हेरिएबल वारसा समस्या टाळते त्यामुळे युटिलिटीजच्या नेस्टेड उदाहरणांमध्ये आपोआप बदललेली अल्फा पारदर्शकता नसते.

उदाहरण

ती अपारदर्शकता बदलण्यासाठी, --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))
    ),