in English

शिमो

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

ह्या पानाचेर

शीम

घटकाच्यो शिमो जोडपाक वा काडपाक शिमेच्यो उपयुक्तताय वापरात. सगळ्या शिमेंतल्यान वा एक एक करून निवडात.

संयुग

सानुकूल घटकांक शिमो जोडात:

एचटीएमएल हें नांव

<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 आवृत्ती वापरतात आनी आल्फा पारदर्शकताये खातीर ( थळाव्या CSS चक्राक लागून मुलभूत 25, 135, 84मोलासयत) दुसरो 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आनी उपयुक्तताय API बदलून संरचीत करूंक शकतात.

एचटीएमएल हें नांव

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