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}بە Sass بە بەکارهێنانی گۆڕاوەکانی CSS دروست دەکرێن. ئەمەش ڕێگە بە گۆڕینی ڕەنگ لە کاتی ڕاستەقینەدا دەدات بەبێ کۆمپایلکردن و گۆڕینی شەفافیەتی ئەلفا داینامیکی.

چۆن کاردەکات

.border-successسوودمەندی پێشوەختەی ئێمە لەبەرچاو بگرە .

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

ئێمە وەشانی RGB ی گۆڕاوەی CSS ی خۆمان بەکاردەهێنین --bs-success(بە بەهای 25, 135, 84) و گۆڕاوەی دووەمی CSSمان هاوپێچ دەکەین، --bs-border-opacity, بۆ شەفافیەتی ئەلفا (بە بەهای پێشوەختە 1بەهۆی گۆڕاوێکی CSSی ناوخۆیی). واتە هەر کاتێک ئێستا بەکاری بهێنیت ، بەهای .border-successحیسابکراوەکەت بریتییە لە . گۆڕاوەی CSSی ناوخۆیی لە ناو هەر پۆلێکدا خۆی لە کێشەکانی میرات دەپارێزێت بۆیە نموونە هێلانەییەکانی سوودمەندەکان بە شێوەیەکی ئۆتۆماتیکی شەفافیەتی ئەلفا دەستکاریکراویان نییە.colorrgba(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))
    ),