বুটামসমূহ

একাধিক আকাৰ, অৱস্থা, আৰু অধিক সমৰ্থনৰ সৈতে প্ৰপত্ৰ, সংলাপ, আৰু অধিক কাৰ্য্যসমূহৰ বাবে Bootstrap ৰ স্বনিৰ্বাচিত বুটাম শৈলীসমূহ ব্যৱহাৰ কৰক।

এই পৃষ্ঠাত

উদাহৰণ

বুটষ্ট্ৰেপে কেইবাটাও পূৰ্বনিৰ্ধাৰিত বুটাম শৈলী অন্তৰ্ভুক্ত কৰে, প্ৰত্যেকেই নিজৰ অৰ্থগত উদ্দেশ্য পূৰণ কৰে, অধিক নিয়ন্ত্ৰণৰ বাবে কেইটামান অতিৰিক্ত নিক্ষেপ কৰা হয়।

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-gridgap-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 ত যোগ কৰা হৈছে

Bootstrap ৰ বিকাশশীল 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 চলকসমূহক পুনৰ নিযুক্ত কৰি আমাৰ docs ৰ বাবে অনন্য বুটামসমূহৰ বাবে আমি কৰা দৰে এটা কাষ্টম পৰিবৰ্তক শ্ৰেণী নিৰ্মাণ কৰাৰ এটা উদাহৰণ ইয়াত দিয়া হৈছে ।

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

ছাছ লুপ

বুটাম ভিন্নতাসমূহে (নিয়মীয়া আৰু ৰূপৰেখা বুটামসমূহৰ বাবে) আমাৰ মেপৰ সৈতে নিজ নিজ মিক্সিনসমূহ ব্যৱহাৰ কৰে $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);
  }
}