বোতাম

একাধিক আকার, অবস্থা এবং আরও অনেক কিছুর সমর্থন সহ ফর্ম, ডায়ালগ এবং আরও অনেক কিছুর জন্য বুটস্ট্র্যাপের কাস্টম বোতাম শৈলী ব্যবহার করুন।

এই পৃষ্ঠায়

উদাহরণ

বুটস্ট্র্যাপে বেশ কয়েকটি পূর্বনির্ধারিত বোতাম শৈলী রয়েছে, প্রতিটি তার নিজস্ব শব্দার্থিক উদ্দেশ্য পরিবেশন করে, আরও নিয়ন্ত্রণের জন্য কয়েকটি অতিরিক্ত নিক্ষেপ করে।

html

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

সহায়ক প্রযুক্তির অর্থ বোঝানো

অর্থ যোগ করার জন্য রঙ ব্যবহার করা শুধুমাত্র একটি ভিজ্যুয়াল ইঙ্গিত দেয়, যা সহায়ক প্রযুক্তির ব্যবহারকারীদের - যেমন স্ক্রিন রিডারদের কাছে জানানো হবে না। নিশ্চিত করুন যে রঙ দ্বারা নির্দেশিত তথ্য হয় বিষয়বস্তু থেকে স্পষ্ট হয় (যেমন দৃশ্যমান পাঠ্য), অথবা বিকল্প উপায়ে অন্তর্ভুক্ত করা হয়েছে, যেমন .visually-hiddenক্লাসের সাথে লুকানো অতিরিক্ত পাঠ্য।

পাঠ্য মোড়ানো অক্ষম করুন

আপনি যদি বোতামের পাঠ্যটি মোড়ানো না চান তবে আপনি বোতামটিতে .text-nowrapক্লাস যুক্ত করতে পারেন। Sass-এ, আপনি $btn-white-space: nowrapপ্রতিটি বোতামের জন্য পাঠ্য মোড়ানো অক্ষম করতে সেট করতে পারেন।

বোতাম ট্যাগ

.btnক্লাসগুলি উপাদানের সাথে ব্যবহার করার জন্য ডিজাইন করা হয়েছে <button>। যাইহোক, আপনি এই ক্লাসগুলি <a>বা <input>উপাদানগুলিতেও ব্যবহার করতে পারেন (যদিও কিছু ব্রাউজার কিছুটা ভিন্ন রেন্ডারিং প্রয়োগ করতে পারে)।

<a>বর্তমান পৃষ্ঠার মধ্যে নতুন পৃষ্ঠা বা বিভাগগুলির সাথে লিঙ্ক করার পরিবর্তে ইন-পেজ কার্যকারিতা (যেমন কন্টেন্ট ভেঙে ফেলা) ট্রিগার করতে ব্যবহৃত উপাদানগুলিতে বোতাম ক্লাস ব্যবহার করার সময়, এই লিঙ্কগুলিকে একটি দেওয়া উচিত role="button"যাতে সহায়ক প্রযুক্তিতে তাদের উদ্দেশ্য যথাযথভাবে জানানো হয় যেমন স্ক্রিন রিডার

লিঙ্ক

html

<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">

আউটলাইন বোতাম

একটি বোতাম প্রয়োজন, কিন্তু না মোটা ব্যাকগ্রাউন্ড রং তারা আনা? .btn-outline-*যেকোনো বোতামে সমস্ত ব্যাকগ্রাউন্ড ইমেজ এবং রঙ মুছে ফেলার জন্য ডিফল্ট মডিফায়ার ক্লাসগুলি দিয়ে প্রতিস্থাপন করুন ।

html

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

কিছু বোতাম শৈলী তুলনামূলকভাবে হালকা ফোরগ্রাউন্ড রঙ ব্যবহার করে এবং পর্যাপ্ত বৈসাদৃশ্য থাকার জন্য শুধুমাত্র একটি অন্ধকার পটভূমিতে ব্যবহার করা উচিত।

মাপ

অভিনব বড় বা ছোট বোতাম? যোগ করুন .btn-lgবা .btn-smঅতিরিক্ত মাপের জন্য.

html

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

html

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

এমনকি আপনি CSS ভেরিয়েবলের সাথে আপনার নিজস্ব কাস্টম সাইজিং রোল করতে পারেন:

html

<button type="button" class="btn btn-primary"
        style="--bs-btn-padding-y: .25rem; --bs-btn-padding-x: .5rem; --bs-btn-font-size: .75rem;">
  Custom button
</button>

প্রতিবন্ধী রাষ্ট্র

disabledযেকোনো <button>উপাদানে বুলিয়ান অ্যাট্রিবিউট যোগ করে বোতামগুলোকে নিষ্ক্রিয় দেখান। অক্ষম বোতামগুলি pointer-events: noneপ্রয়োগ করা হয়েছে, হোভার এবং সক্রিয় অবস্থাকে ট্রিগার হতে বাধা দেয়৷

html

<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Button</button>
<button type="button" class="btn btn-outline-primary" disabled>Primary button</button>
<button type="button" class="btn btn-outline-secondary" disabled>Button</button>

উপাদান ব্যবহার করে অক্ষম বোতাম <a>একটু ভিন্ন আচরণ করে:

<a>s disabledবৈশিষ্ট্যটিকে সমর্থন করে না, তাই .disabledএটিকে দৃশ্যত অক্ষম করার জন্য আপনাকে অবশ্যই ক্লাসটি যুক্ত করতে হবে।
কিছু ভবিষ্যত-বন্ধুত্বপূর্ণ শৈলী অন্তর্ভুক্ত করা pointer-eventsহয়েছে অ্যাঙ্কর বোতামে সমস্ত অক্ষম করতে।
অক্ষম বোতাম ব্যবহার করে সহায়ক প্রযুক্তিতে উপাদানের অবস্থা নির্দেশ করার জন্য বৈশিষ্ট্য <a>অন্তর্ভুক্ত করা উচিত ।aria-disabled="true"
অক্ষম বোতাম ব্যবহার করে বৈশিষ্ট্য অন্তর্ভুক্ত করা <a> উচিত নয় ।href

প্রাথমিক লিঙ্ক লিঙ্ক

html

<a class="btn btn-primary disabled" role="button" aria-disabled="true">Primary link</a>
<a class="btn btn-secondary disabled" role="button" aria-disabled="true">Link</a>

লিঙ্ক কার্যকারিতা সতর্কতা

এমন ক্ষেত্রে কভার করতে যেখানে আপনাকে hrefএকটি অক্ষম লিঙ্কে অ্যাট্রিবিউট রাখতে হবে, .disabledক্লাসটি s-এর pointer-events: noneলিঙ্ক কার্যকারিতা নিষ্ক্রিয় করার চেষ্টা করতে ব্যবহার করে। <a>মনে রাখবেন যে এই CSS বৈশিষ্ট্যটি এখনও HTML এর জন্য মানসম্মত নয়, তবে সমস্ত আধুনিক ব্রাউজার এটি সমর্থন করে। উপরন্তু, এমনকি সমর্থন করে এমন ব্রাউজারগুলিতেও pointer-events: none, কীবোর্ড নেভিগেশন অপ্রভাবিত থাকে, যার অর্থ দৃষ্টিশক্তিসম্পন্ন কীবোর্ড ব্যবহারকারী এবং সহায়ক প্রযুক্তির ব্যবহারকারীরা এখনও এই লিঙ্কগুলি সক্রিয় করতে সক্ষম হবে। তাই নিরাপদ থাকার জন্য, এর সাথে , এই লিঙ্কগুলিতে কীবোর্ড ফোকাস পেতে বাধা দেওয়ার জন্য aria-disabled="true"একটি বৈশিষ্ট্যও অন্তর্ভুক্ত করুন এবং তাদের কার্যকারিতা সম্পূর্ণরূপে অক্ষম করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন৷tabindex="-1"

প্রাথমিক লিঙ্ক লিঙ্ক

html

<a href="#" class="btn btn-primary disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

ব্লক বোতাম

আমাদের ডিসপ্লে এবং গ্যাপ ইউটিলিটিগুলির মিশ্রণে বুটস্ট্র্যাপ 4-এর মতো পূর্ণ-প্রস্থের প্রতিক্রিয়াশীল স্ট্যাক তৈরি করুন, "ব্লক বোতাম"। বোতাম নির্দিষ্ট ক্লাসের পরিবর্তে ইউটিলিটিগুলি ব্যবহার করে, আমাদের স্পেসিং, প্রান্তিককরণ এবং প্রতিক্রিয়াশীল আচরণের উপর অনেক বেশি নিয়ন্ত্রণ রয়েছে।

html

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

mdএখানে আমরা একটি প্রতিক্রিয়াশীল বৈচিত্র তৈরি করি, ব্রেকপয়েন্ট পর্যন্ত উল্লম্বভাবে স্ট্যাক করা বোতাম দিয়ে শুরু করে , যেখানে ক্লাস .d-md-blockপ্রতিস্থাপন করে .d-grid, এইভাবে gap-2ইউটিলিটি বাতিল করে দেয়। তাদের পরিবর্তন দেখতে আপনার ব্রাউজারের আকার পরিবর্তন করুন।

html

<div class="d-grid gap-2 d-md-block">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

আপনি গ্রিড কলাম প্রস্থ ক্লাসের সাথে আপনার ব্লক বোতামের প্রস্থ সামঞ্জস্য করতে পারেন। উদাহরণস্বরূপ, অর্ধ-প্রস্থ "ব্লক বোতাম" এর জন্য, ব্যবহার করুন .col-6। এটিকে অনুভূমিকভাবে কেন্দ্র করেও .mx-auto।

html

<div class="d-grid gap-2 col-6 mx-auto">
  <button class="btn btn-primary" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

অনুভূমিক অবস্থায় বোতামগুলির প্রান্তিককরণ সামঞ্জস্য করতে অতিরিক্ত ইউটিলিটিগুলি ব্যবহার করা যেতে পারে। এখানে আমরা আমাদের আগের প্রতিক্রিয়াশীল উদাহরণ নিয়েছি এবং বোতামে কিছু ফ্লেক্স ইউটিলিটি এবং একটি মার্জিন ইউটিলিটি যোগ করেছি যাতে বোতামগুলি আর স্ট্যাক করা থাকে না।

html

<div class="d-grid gap-2 d-md-flex justify-content-md-end">
  <button class="btn btn-primary me-md-2" type="button">Button</button>
  <button class="btn btn-primary" type="button">Button</button>
</div>

বোতাম প্লাগইন

বোতাম প্লাগইন আপনাকে সহজ অন/অফ টগল বোতাম তৈরি করতে দেয়।

দৃশ্যত, এই টগল বোতামগুলি চেকবক্স টগল বোতামগুলির সাথে অভিন্ন ৷ যাইহোক, এগুলি সহায়ক প্রযুক্তির দ্বারা ভিন্নভাবে জানানো হয়: চেকবক্স টগলগুলি স্ক্রিন রিডারদের দ্বারা "চেক করা"/"চেক করা হয়নি" হিসাবে ঘোষণা করা হবে (যেহেতু, তাদের চেহারা সত্ত্বেও, তারা মৌলিকভাবে এখনও চেকবক্স), যেখানে এই টগল বোতামগুলি হিসাবে ঘোষণা করা হবে "বোতাম"/"বোতাম চাপা"। এই দুটি পদ্ধতির মধ্যে পছন্দটি আপনি যে ধরনের টগল তৈরি করছেন তার উপর নির্ভর করবে এবং চেকবক্স বা প্রকৃত বোতাম হিসাবে ঘোষণা করার সময় টগল ব্যবহারকারীদের কাছে বোধগম্য হবে কিনা।

রাজ্য টগল করুন

data-bs-toggle="button"একটি বোতামের অবস্থা টগল করতে যোগ করুন active। আপনি যদি একটি বোতাম প্রি-টগল করে থাকেন, তাহলে আপনাকে অবশ্যই .activeক্লাসটি ম্যানুয়ালি যোগ করতে হবে এবং aria-pressed="true" নিশ্চিত করতে হবে যে এটি সহায়ক প্রযুক্তিতে যথাযথভাবে পৌঁছেছে।

html

<button type="button" class="btn btn-primary" data-bs-toggle="button">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button">Disabled toggle button</button>

লিঙ্ক টগল করুন সক্রিয় টগল লিঙ্ক অক্ষম টগল লিঙ্ক

html

<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

পদ্ধতি

আপনি বোতাম কনস্ট্রাক্টরের সাথে একটি বোতাম উদাহরণ তৈরি করতে পারেন, উদাহরণস্বরূপ:

const bsButton = new bootstrap.Button('#myButton')

পদ্ধতি	বর্ণনা
`dispose`	একটি উপাদানের বোতাম ধ্বংস করে। (DOM উপাদানে সঞ্চিত ডেটা সরিয়ে দেয়)
`getInstance`	স্ট্যাটিক পদ্ধতি যা আপনাকে একটি DOM উপাদানের সাথে যুক্ত বোতামের উদাহরণ পেতে দেয়, আপনি এটি এভাবে ব্যবহার করতে পারেন: `bootstrap.Button.getInstance(element)`.
`getOrCreateInstance`	স্ট্যাটিক পদ্ধতি যা একটি DOM উপাদানের সাথে যুক্ত একটি বোতামের উদাহরণ প্রদান করে বা এটি আরম্ভ করা না হলে একটি নতুন তৈরি করে৷ আপনি এটি এই মত ব্যবহার করতে পারেন: `bootstrap.Button.getOrCreateInstance(element)`.
`toggle`	পুশ স্টেট টগল করে। বোতামটিকে এমন চেহারা দেয় যে এটি সক্রিয় করা হয়েছে।

উদাহরণস্বরূপ, সমস্ত বোতাম টগল করতে

document.querySelectorAll('.btn').forEach(buttonElement => {
  const button = bootstrap.Button.getOrCreateInstance(buttonElement)
  button.toggle()
})

সিএসএস

ভেরিয়েবল

v5.2.0 এ যোগ করা হয়েছে

বুটস্ট্র্যাপের বিকশিত CSS ভেরিয়েবল পদ্ধতির অংশ হিসাবে, বোতামগুলি এখন .btnউন্নত রিয়েল-টাইম কাস্টমাইজেশনের জন্য স্থানীয় CSS ভেরিয়েবল ব্যবহার করে। CSS ভেরিয়েবলের মান Sass এর মাধ্যমে সেট করা হয়, তাই Sass কাস্টমাইজেশন এখনও সমর্থিত।

  --#{$prefix}btn-padding-x: #{$btn-padding-x};
  --#{$prefix}btn-padding-y: #{$btn-padding-y};
  --#{$prefix}btn-font-family: #{$btn-font-family};
  @include rfs($btn-font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-font-weight: #{$btn-font-weight};
  --#{$prefix}btn-line-height: #{$btn-line-height};
  --#{$prefix}btn-color: #{$body-color};
  --#{$prefix}btn-bg: transparent;
  --#{$prefix}btn-border-width: #{$btn-border-width};
  --#{$prefix}btn-border-color: transparent;
  --#{$prefix}btn-border-radius: #{$btn-border-radius};
  --#{$prefix}btn-hover-border-color: transparent;
  --#{$prefix}btn-box-shadow: #{$btn-box-shadow};
  --#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
  --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);

প্রতিটি সংশোধক শ্রেণী আমাদের , , এবং মিক্সিনের .btn-*সাথে অতিরিক্ত CSS নিয়মগুলিকে ছোট করতে উপযুক্ত CSS ভেরিয়েবল আপডেট করে ।button-variant()button-outline-variant()button-size()

.btn-*আমাদের নিজস্ব CSS এবং Sass ভেরিয়েবলের মিশ্রণের সাথে Bootstrap-এর CSS ভেরিয়েবলগুলিকে পুনরায় বরাদ্দ করে আমাদের ডক্সের জন্য অনন্য বোতামগুলির মতো আমরা একটি কাস্টম মডিফায়ার ক্লাস তৈরি করার একটি উদাহরণ এখানে দেওয়া হল।

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

Sass ভেরিয়েবল

$btn-padding-y:               $input-btn-padding-y;
$btn-padding-x:               $input-btn-padding-x;
$btn-font-family:             $input-btn-font-family;
$btn-font-size:               $input-btn-font-size;
$btn-line-height:             $input-btn-line-height;
$btn-white-space:             null; // Set to `nowrap` to prevent text wrapping

$btn-padding-y-sm:            $input-btn-padding-y-sm;
$btn-padding-x-sm:            $input-btn-padding-x-sm;
$btn-font-size-sm:            $input-btn-font-size-sm;

$btn-padding-y-lg:            $input-btn-padding-y-lg;
$btn-padding-x-lg:            $input-btn-padding-x-lg;
$btn-font-size-lg:            $input-btn-font-size-lg;

$btn-border-width:            $input-btn-border-width;

$btn-font-weight:             $font-weight-normal;
$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
$btn-focus-width:             $input-btn-focus-width;
$btn-focus-box-shadow:        $input-btn-focus-box-shadow;
$btn-disabled-opacity:        .65;
$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125);

$btn-link-color:              var(--#{$prefix}link-color);
$btn-link-hover-color:        var(--#{$prefix}link-hover-color);
$btn-link-disabled-color:     $gray-600;

// Allows for customizing button radius independently from global border radius
$btn-border-radius:           $border-radius;
$btn-border-radius-sm:        $border-radius-sm;
$btn-border-radius-lg:        $border-radius-lg;

$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$btn-hover-bg-shade-amount:       15%;
$btn-hover-bg-tint-amount:        15%;
$btn-hover-border-shade-amount:   20%;
$btn-hover-border-tint-amount:    10%;
$btn-active-bg-shade-amount:      20%;
$btn-active-bg-tint-amount:       20%;
$btn-active-border-shade-amount:  25%;
$btn-active-border-tint-amount:   10%;

সাস মিক্সিং

বোতামের জন্য তিনটি মিশ্রণ রয়েছে: বোতাম এবং বোতামের আউটলাইন ভেরিয়েন্ট মিক্সিন (উভয়টির উপর ভিত্তি করে $theme-colors), এবং একটি বোতামের আকারের মিশ্রণ।

@mixin button-variant(
  $background,
  $border,
  $color: color-contrast($background),
  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  $hover-color: color-contrast($hover-background),
  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  $active-color: color-contrast($active-background),
  $disabled-background: $background,
  $disabled-border: $border,
  $disabled-color: color-contrast($disabled-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-bg: #{$background};
  --#{$prefix}btn-border-color: #{$border};
  --#{$prefix}btn-hover-color: #{$hover-color};
  --#{$prefix}btn-hover-bg: #{$hover-background};
  --#{$prefix}btn-hover-border-color: #{$hover-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$disabled-color};
  --#{$prefix}btn-disabled-bg: #{$disabled-background};
  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
}

@mixin button-outline-variant(
  $color,
  $color-hover: color-contrast($color),
  $active-background: $color,
  $active-border: $color,
  $active-color: color-contrast($active-background)
) {
  --#{$prefix}btn-color: #{$color};
  --#{$prefix}btn-border-color: #{$color};
  --#{$prefix}btn-hover-color: #{$color-hover};
  --#{$prefix}btn-hover-bg: #{$active-background};
  --#{$prefix}btn-hover-border-color: #{$active-border};
  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb($color)};
  --#{$prefix}btn-active-color: #{$active-color};
  --#{$prefix}btn-active-bg: #{$active-background};
  --#{$prefix}btn-active-border-color: #{$active-border};
  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  --#{$prefix}btn-disabled-color: #{$color};
  --#{$prefix}btn-disabled-bg: transparent;
  --#{$prefix}btn-disabled-border-color: #{$color};
  --#{$prefix}gradient: none;
}

@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  --#{$prefix}btn-padding-y: #{$padding-y};
  --#{$prefix}btn-padding-x: #{$padding-x};
  @include rfs($font-size, --#{$prefix}btn-font-size);
  --#{$prefix}btn-border-radius: #{$border-radius};
}

Sass loops

বোতাম ভেরিয়েন্টগুলি (নিয়মিত এবং আউটলাইন বোতামগুলির জন্য) আমাদের $theme-colorsমানচিত্রের সাথে তাদের নিজ নিজ মিশ্রণ ব্যবহার করে তে সংশোধক ক্লাসগুলি তৈরি করতে scss/_buttons.scss৷

@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @if $color == "light" {
      @include button-variant(
        $value,
        $value,
        $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
        $hover-border: shade-color($value, $btn-hover-border-shade-amount),
        $active-background: shade-color($value, $btn-active-bg-shade-amount),
        $active-border: shade-color($value, $btn-active-border-shade-amount)
      );
    } @else if $color == "dark" {
      @include button-variant(
        $value,
        $value,
        $hover-background: tint-color($value, $btn-hover-bg-tint-amount),
        $hover-border: tint-color($value, $btn-hover-border-tint-amount),
        $active-background: tint-color($value, $btn-active-bg-tint-amount),
        $active-border: tint-color($value, $btn-active-border-tint-amount)
      );
    } @else {
      @include button-variant($value, $value);
    }
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}