بٽڻ

بوٽ اسٽريپ جي حسب ضرورت بٽڻ واري اسلوب کي استعمال ڪريو عملن لاءِ فارمز، ڊائلاگس، ۽ وڌيڪ ۾ گھڻن سائزن، رياستن ۽ وڌيڪ لاءِ سپورٽ سان.

هن صفحي تي

مثال

بوٽ اسٽريپ ۾ ڪيترائي اڳواٽ بيان ڪيل بٽڻ اسلوب شامل آھن، ھر ھڪ پنھنجي پنھنجي مقصد جي خدمت ڪري ٿو، ڪجھ اضافي اضافي سان گڏ وڌيڪ ڪنٽرول لاءِ.

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ڪلاس کي بٽڻ تي شامل ڪري سگهو ٿا. ساس ۾، توهان $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>

توھان سي ايس ايس متغيرن سان پنھنجي پنھنجي ڪسٽم سائزنگ کي به رول ڪري سگھو ٿا:

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>

بلاڪ بٽڻ

مڪمل چوٽيءَ جا جوابي اسٽيڪ ٺاهيو، ”بلاڪ بٽڻ“ جھڙوڪ Bootstrap 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`	هڪ عنصر جي بٽڻ کي تباهه ڪري ٿو. (ڊوم عنصر تي ذخيرو ٿيل ڊيٽا کي هٽائي ٿو)
`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 متغيرن لاءِ قيمتون 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()mixins سان.

ھتي ھڪڙو مثال آھي ڪسٽم .btn-*موڊيفائر ڪلاس ٺاھڻ جو جيئن اسان بٽڻن لاءِ ڪندا آھيون اسان جي دستاويزن لاءِ منفرد Bootstrap جي CSS متغيرن کي اسان جي پنھنجي CSS ۽ Sass متغيرن جي ميلاپ سان.

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

سس متغير

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