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কাস্টম শৈলী বা ইনলাইন শৈলীর মাধ্যমে ওভাররাইড করুন।

এটি ডিফল্ট সাফল্য সীমানা

এটি 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))
    ),