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

--bs-successআমি আমাৰ (ৰ মানৰ সৈতে ) CSS চলকৰ এটা RGB সংস্কৰণ ব্যৱহাৰ কৰো আৰু আলফা স্বচ্ছতাৰ বাবে 25, 135, 84এটা দ্বিতীয় CSS চলক, , সংলগ্ন কৰোঁ ( এটা স্থানীয় CSS চলকৰ বাবে ধন্যবাদ এটা অবিকল্পিত মানৰ সৈতে)। অৰ্থাৎ আপুনি এতিয়া ব্যৱহাৰ কৰা যিকোনো সময়তে, আপোনাৰ গণনা কৰা মান হ'ল . প্ৰতিটো শ্ৰেণীৰ ভিতৰত স্থানীয় CSS চলকটোৱে উত্তৰাধিকাৰ সমস্যাসমূহ এৰাই চলিব যাতে সঁজুলিসমূহৰ নেষ্টেড উদাহৰণসমূহৰ স্বয়ংক্ৰিয়ভাৱে এটা পৰিবৰ্তিত আলফা স্বচ্ছতা নাথাকে।--bs-border-opacity1.border-successcolorrgba(25, 135, 84, 1).border-*

উদাহৰণ

সেই অস্পষ্টতা সলনি কৰিবলে, --bs-border-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:

এইটো অবিকল্পিত সফলতা সীমা

এইটো ৭৫% অস্পষ্টতা সফলতাৰ সীমা

এইটো ৫০% অস্পষ্টতা সফলতা সীমা

এইটো ২৫% অস্পষ্টতা সফলতাৰ সীমা

এইটো ১০% অস্পষ্টতা সফলতা সীমা

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 ত ঘোষণা কৰা হৈছে 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))
    ),