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 மாறிகளைப் பயன்படுத்தி Sass உடன் உருவாக்கப்படுகின்றன. இது தொகுத்தல் மற்றும் மாறும் ஆல்பா வெளிப்படைத்தன்மை மாற்றங்கள் இல்லாமல் நிகழ் நேர வண்ண மாற்றங்களை அனுமதிக்கிறது.

எப்படி இது செயல்படுகிறது

எங்கள் இயல்புநிலை .border-successபயன்பாட்டைக் கவனியுங்கள்.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

ஆல்ஃபா வெளிப்படைத்தன்மைக்காக ( உள்ளூர் CSS மாறிக்கு நன்றி செலுத்தும் இயல்புநிலை மதிப்புடன்) எங்களின் --bs-success(மதிப்புடன் ) CSS மாறியின் RGB பதிப்பைப் பயன்படுத்துகிறோம், மேலும் 25, 135, 84இரண்டாவது 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};

சாஸ் மாறிகள்

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