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 سان ٺاهيل آهن. هي بغير تاليف ۽ متحرڪ الفا شفافيت تبديلين جي حقيقي وقت رنگ تبديلين جي اجازت ڏئي ٿو.

اهو ڪيئن ڪم ڪري ٿو

اسان جي ڊفالٽ .border-successافاديت تي غور ڪريو.

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

اسان استعمال ڪريون ٿا RGB ورجن جو اسان جي --bs-success(جي قيمت سان 25, 135, 84) CSS متغير ۽ جڙيل هڪ ٻيو CSS متغير، --bs-border-opacity, الفا شفافيت لاءِ (هڪ ڊفالٽ قدر 1سان مقامي CSS متغير جي مهرباني). ان جو مطلب اهو آهي ته جڏهن به توهان .border-successهاڻي استعمال ڪريو ٿا، توهان جي حساب ڪيل colorقيمت آهي rgba(25, 135, 84, 1). مقامي CSS متغير هر .border-*طبقي جي اندر وراثت جي مسئلن کان بچي ٿو، تنهنڪري يوٽيلٽيز جي nested مثالن ۾ خودڪار طريقي سان تبديل ٿيل الفا شفافيت نه هوندي آهي.

مثال

ان اوپيسيٽي کي تبديل ڪرڻ لاءِ، --bs-border-opacityڪسٽم اسلوب يا ان لائن اسلوب ذريعي اوور رائڊ ڪريو.

هي ڊفالٽ ڪاميابي سرحد آهي

هي آهي 50٪ opacity ڪاميابي سرحد

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٪ opacity ڪاميابي سرحد

هي آهي 25٪ opacity ڪاميابي سرحد

هي 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="...">

سي ايس ايس

متغير

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