in English

ಗಡಿ

ಅಂಶದ ಗಡಿ ಮತ್ತು ಗಡಿ-ತ್ರಿಜ್ಯವನ್ನು ತ್ವರಿತವಾಗಿ ಶೈಲಿ ಮಾಡಲು ಗಡಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ. ಚಿತ್ರಗಳು, ಬಟನ್‌ಗಳು ಅಥವಾ ಯಾವುದೇ ಇತರ ಅಂಶಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ.

ಈ ಪುಟದಲ್ಲಿ

ಗಡಿ

ಅಂಶದ ಗಡಿಗಳನ್ನು ಸೇರಿಸಲು ಅಥವಾ ತೆಗೆದುಹಾಕಲು ಗಡಿ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಬಳಸಿ. ಎಲ್ಲಾ ಗಡಿಗಳಿಂದ ಅಥವಾ ಒಂದು ಸಮಯದಲ್ಲಿ ಒಂದನ್ನು ಆಯ್ಕೆಮಾಡಿ.

ಸಂಯೋಜಕ

ಕಸ್ಟಮ್ ಅಂಶಗಳಿಗೆ ಗಡಿಗಳನ್ನು ಸೇರಿಸಿ:

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 ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಸ್‌ನೊಂದಿಗೆ ಉತ್ಪಾದಿಸಲಾಗುತ್ತದೆ. ಸಂಕಲನ ಮತ್ತು ಡೈನಾಮಿಕ್ ಆಲ್ಫಾ ಪಾರದರ್ಶಕತೆಯ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ನೈಜ-ಸಮಯದ ಬಣ್ಣ ಬದಲಾವಣೆಗಳಿಗೆ ಇದು ಅನುಮತಿಸುತ್ತದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನಮ್ಮ ಡೀಫಾಲ್ಟ್ .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). ಪ್ರತಿ ವರ್ಗದೊಳಗಿನ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್ .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};

ಸಾಸ್ ಅಸ್ಥಿರ

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