سرحدوں

کسی عنصر کے بارڈر اور بارڈر ریڈیئس کو تیزی سے اسٹائل کرنے کے لیے بارڈر یوٹیلیٹیز کا استعمال کریں۔ تصاویر، بٹن، یا کسی دوسرے عنصر کے لیے بہت اچھا ہے۔

اس صفحہ پر

بارڈر

کسی عنصر کے بارڈرز کو شامل کرنے یا ہٹانے کے لیے بارڈر یوٹیلیٹیز کا استعمال کریں۔ تمام سرحدوں سے یا ایک وقت میں ایک کا انتخاب کریں۔

اضافی

اپنی مرضی کے عناصر میں سرحدیں شامل کریں:

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}یوٹیلیٹیز سی ایس ایس متغیرات کا استعمال کرتے ہوئے ساس کے ساتھ تیار کی جاتی ہیں۔ یہ تالیف اور متحرک الفا شفافیت کی تبدیلیوں کے بغیر حقیقی وقت کے رنگ کی تبدیلیوں کی اجازت دیتا ہے۔

یہ کیسے کام کرتا ہے

ہماری ڈیفالٹ .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-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="...">

سی ایس ایس

متغیرات

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};

Sass متغیرات

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