सीमानाहरू

एक तत्वको किनारा र सीमाना त्रिज्यालाई द्रुत रूपमा शैली गर्न सीमा उपयोगिताहरू प्रयोग गर्नुहोस्। छविहरू, बटनहरू, वा कुनै अन्य तत्वहरूको लागि उत्कृष्ट।

यस पृष्ठमा

सीमा

एक तत्वको किनाराहरू थप्न वा हटाउन सीमा उपयोगिताहरू प्रयोग गर्नुहोस्। सबै सीमानाहरूबाट वा एक पटकमा एक छान्नुहोस्।

additive

अनुकूलन तत्वहरूमा सीमानाहरू थप्नुहोस्:

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