အဓိကအကြောင်းအရာသို့ ကျော်သွားပါ။ စာရွက်စာတမ်းလမ်းညွှန်မှုသို့ ကျော်သွားပါ။
in English

ခလုတ်များ

အရွယ်အစား၊ ပြည်နယ်များနှင့် အခြားအရာများစွာအတွက် ပံ့ပိုးမှုဖြင့် ဖောင်များ၊ ဒိုင်ယာလော့ခ်များနှင့် အခြားအရာများအတွက် လုပ်ဆောင်ချက်များအတွက် Bootstrap ၏ စိတ်ကြိုက်ခလုတ်ပုံစံများကို အသုံးပြုပါ။

ဥပမာများ

Bootstrap တွင် ကြိုတင်သတ်မှတ်ထားသော ခလုတ်ပုံစံများစွာ ပါဝင်သည်၊ တစ်ခုစီသည် ၎င်း၏ကိုယ်ပိုင် အဓိပ္ပါယ်ဖွင့်ဆိုချက် ရည်ရွယ်ချက်ကို ဆောင်ရွက်ပေးသည်၊ ပိုမိုထိန်းချုပ်ရန်အတွက် အပိုပစ္စည်းအနည်းငယ်ဖြင့် ထည့်သွင်းထားသည်။

<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: nowrapSass တွင်၊ ခလုတ်တစ်ခုစီအတွက် စာသားထုပ်ပိုးခြင်းကို ပိတ်ရန် သင်သတ်မှတ်နိုင်သည် ။

ခလုတ်များ

အတန်းများကို element .btnနှင့်အသုံးပြုရန်ဒီဇိုင်းပြုလုပ်ထားသည် ။ <button>သို့သော်၊ သင်သည် ဤအတန်းများ <a>သို့မဟုတ် <input>ဒြပ်စင်များပေါ်တွင်လည်း သုံးနိုင်သည် (အချို့သောဘရောက်ဆာများသည် အနည်းငယ်ကွဲပြားသော rendering ကိုသုံးနိုင်သော်လည်း)။

စာမျက်နှာအတွင်း လုပ်ဆောင်နိုင်စွမ်းကို အစပျိုးရန် အသုံးပြုသည့် အစိတ်အပိုင်းများ (ပြိုကျနေသော အကြောင်းအရာများကဲ့သို့) ခလုတ်အတန်းများကို အသုံးပြုသည့်အခါ <a>လက်ရှိစာမျက်နှာအတွင်းရှိ စာမျက်နှာအသစ်များ သို့မဟုတ် ကဏ္ဍများသို့ လင့်ခ်ချိတ်ခြင်းထက်၊ ဤလင့်ခ်များကို role="button"၎င်းတို့၏ ရည်ရွယ်ချက်ကို အထောက်အကူဖြစ်စေသော နည်းပညာများဖြစ်သည့် သင့်လျော်စွာ ဖော်ပြရန် ဤလင့်ခ်များကို ပေးအပ်သင့်သည်။ မျက်နှာပြင်စာဖတ်သူများ။

လင့်
<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-*ခလုတ်တစ်ခုခုရှိ နောက်ခံပုံများနှင့် အရောင်များအားလုံးကို ဖယ်ရှားရန် မူရင်းမွမ်းမံမှုအတန်းများကို အမျိုးအစားများနှင့် အစားထိုးပါ ။

<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အပိုအရွယ်အစားများအတွက်။

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

မသန်စွမ်းသောအခြေအနေ

မည်သည့် ဒြပ်စင် disabledသို့ boolean ရည်ညွှန်းချက်ကို ပေါင်းထည့်ခြင်းဖြင့် ခလုတ်များကို မလှုပ်မ ရှားဖြစ်စေသည်။ <button>မသန်စွမ်းသော ခလုတ်များကို pointer-events: noneအသုံးပြုထားပြီး၊ ဟိုက်သည်နှင့် လှုပ်ရှားနေသော အခြေအနေများ ပွင့်မလာစေရန် တားဆီးထားသည်။

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

ဒြပ်စင် ကို အသုံးပြု၍ ပိတ်ထားသော ခလုတ်များသည် <a>အနည်းငယ်ကွဲပြားသည်-

  • <a>disableds သည် attribute ကို မပံ့ပိုး ပါ၊ ထို့ကြောင့် .disabled၎င်းကိုမြင်သာစွာပိတ်ထားစေရန်သင်အတန်းကိုထည့်ရပါမည်။
  • pointer-eventsanchor ခလုတ် များအားလုံးကို ပိတ်ရန် အနာဂတ်အတွက် အဆင်ပြေသော စတိုင်အချို့ ပါဝင်ပါသည်။
  • aria-disabled="true"အထောက်အကူနည်းပညာများအတွက် ဒြပ်စင်၏အခြေအနေအား ညွှန်ပြရန် မသန်စွမ်းခလုတ်များ ပါဝင်သင့်သည် ။
<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>

.disabledclass သည် s ၏ pointer-events: nonelink functionality ကို disable လုပ်ရန်ကြိုးစား <a>သော်လည်း CSS ပိုင်ဆိုင်မှုသည် စံသတ်မှတ်ထားခြင်းမရှိသေးပါ။ ထို့အပြင်၊ ပံ့ပိုးပေးသည့်ဘရောက်ဆာများတွင်ပင် pointer-events: none၊ ကီးဘုတ်လမ်းညွှန်မှုအား ထိခိုက်ခြင်းမရှိပါ ၊ ဆိုလိုသည်မှာ မျက်စိမြင်သောကီးဘုတ်အသုံးပြုသူများနှင့် အထောက်အကူပြုနည်းပညာအသုံးပြုသူများသည် အဆိုပါလင့်ခ်များကို အသက်သွင်းနိုင်ဆဲဖြစ်သည်။ ထို့ကြောင့် ဘေးကင်းစေရန်အတွက်၊ ၎င်းတို့အား ကီးဘုတ်အာရုံကို လက်ခံရရှိခြင်းမှ ကာကွယ်ရန်နှင့် ၎င်းတို့၏ လုပ်ဆောင်နိုင်စွမ်းကို လုံးလုံးပိတ်ရန် စိတ်ကြိုက် JavaScript ကို အသုံးပြု၍ ဤလင့်ခ်များပေါ်တွင် ရည်ညွှန်းချက် aria-disabled="true"တစ်ခုလည်း ထည့်သွင်းပါ ။tabindex="-1"

ခလုတ်များကို ပိတ်ပါ။

ကျွန်ုပ်တို့၏ display နှင့် gap utilities များရောနှောထားသော Bootstrap 4 တွင်ရှိသည့် အကျယ်အဝန်းအပြည့်ရှိသော တုံ့ပြန်မှုအစုများကို ဖန်တီးပါ။ ခလုတ်သီးသန့်အတန်းအစား utilities များကိုအသုံးပြုခြင်းဖြင့်၊ ကျွန်ုပ်တို့တွင် အကွာအဝေး၊ ချိန်ညှိမှုနှင့် တုံ့ပြန်မှုဆိုင်ရာအပြုအမူများအပေါ်တွင် ပိုမိုထိန်းချုပ်နိုင်မည်ဖြစ်သည်။

<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သည့် breakpoint သည်အထိ ဒေါင်လိုက်အစီအစဥ်ရှိသော ခလုတ်များဖြင့် စတင်ကာ တုံ့ပြန်မှုပုံစံကို ဖန်တီးကာ အသုံးပြုမှု ကို ပျက်ပြယ်စေသည် ။ ၎င်းတို့ပြောင်းလဲမှုကိုမြင်ရန် သင့်ဘရောက်ဆာကို အရွယ်အစားပြောင်းပါ။.d-md-block.d-gridgap-2

<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

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

အလျားလိုက်လိုက်သည့်အခါ ခလုတ်များ၏ ချိန်ညှိမှုကို ချိန်ညှိရန် အပိုပစ္စည်းများကို အသုံးပြုနိုင်သည်။ ဤတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ယခင်တုံ့ပြန်မှုနမူနာကိုယူထားပြီး ၎င်းတို့သည် ထပ်မထပ်တော့သည့်အခါ ခလုတ်များကို ညာဘက်ချိန်ညှိရန်အတွက် flex utilities နှင့် margin utility အချို့ကို ပေါင်းထည့်ထားပါသည်။

<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" ကိုယ်တိုင်ထည့်သွင်းရမည်ဖြစ်ပြီး ၎င်းကို အထောက်အကူပြုနည်းပညာများထံ သင့်လျော်စွာ ပို့ဆောင်ကြောင်း သေချာစေရန်။

<button type="button" class="btn btn-primary" data-bs-toggle="button" autocomplete="off">Toggle button</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" autocomplete="off" aria-pressed="true">Active toggle button</button>
<button type="button" class="btn btn-primary" disabled data-bs-toggle="button" autocomplete="off">Disabled toggle button</button>
<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 href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>

နည်းလမ်းများ

ဥပမာအားဖြင့် ခလုတ်တည်ဆောက်သူဖြင့် ခလုတ်ဥပမာတစ်ခုကို သင်ဖန်တီးနိုင်သည်-

var button = document.getElementById('myButton')
var bsButton = new bootstrap.Button(button)
နည်းလမ်း ဖော်ပြချက်
toggle တွန်းသည့်အခြေအနေသို့ ပြောင်းရန်။ ခလုတ်ကို စဖွင့်ပြီးကြောင်း အသွင်အပြင်ကို ပေးသည်။
dispose ဒြပ်စင်တစ်ခု၏ခလုတ်ကို ဖျက်ပါ။ (DOM ဒြပ်စင်ပေါ်ရှိ သိမ်းဆည်းထားသည့် ဒေတာကို ဖယ်ရှားသည်)
getInstance DOM ဒြပ်စင်နှင့် ဆက်စပ်နေသော ခလုတ် instance ကို ရယူရန် ခွင့်ပြုသည့် Static method၊ သင်သည် ၎င်းကို ဤကဲ့သို့ အသုံးပြုနိုင်သည်။bootstrap.Button.getInstance(element)
getOrCreateInstance DOM ဒြပ်စင်နှင့်ဆက်စပ်နေသည့် ခလုတ်ဥပမာတစ်ခုကို ပြန်ပေးသည့်ပုံစံ သို့မဟုတ် ကနဦးမလုပ်ဆောင်ပါက အသစ်တစ်ခုဖန်တီးသည့် တည်ငြိမ်သောနည်းလမ်း။ သင်ဤကဲ့သို့အသုံးပြုနိုင်သည်။bootstrap.Button.getOrCreateInstance(element)

ဥပမာအားဖြင့်၊ ခလုတ်များအားလုံးပြောင်းရန်

var buttons = document.querySelectorAll('.btn')
buttons.forEach(function (button) {
  var button = new bootstrap.Button(button)
  button.toggle()
})

ဆူး

ကိန်းရှင်များ

$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:              $link-color;
$btn-link-hover-color:        $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%;

Mixins

ခလုတ်များအတွက် ရောနှောချက်သုံးမျိုး ရှိသည်- ခလုတ်နှင့် ခလုတ်အကြမ်းမျဉ်း မူကွဲ ရောစပ်ခြင်း (နှစ်ခုလုံးအပေါ် အခြေခံ၍ $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)
) {
  color: $color;
  @include gradient-bg($background);
  border-color: $border;
  @include box-shadow($btn-box-shadow);

  &:hover {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
  }

  .btn-check:focus + &,
  &:focus {
    color: $hover-color;
    @include gradient-bg($hover-background);
    border-color: $hover-border;
    @if $enable-shadows {
      @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
    } @else {
      // Avoid using mixin so we can pass custom focus shadow properly
      box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
    }
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  .show > &.dropdown-toggle {
    color: $active-color;
    background-color: $active-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $disabled-color;
    background-color: $disabled-background;
    // Remove CSS gradients if they're enabled
    background-image: if($enable-gradients, none, null);
    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)
) {
  color: $color;
  border-color: $color;

  &:hover {
    color: $color-hover;
    background-color: $active-background;
    border-color: $active-border;
  }

  .btn-check:focus + &,
  &:focus {
    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  }

  .btn-check:checked + &,
  .btn-check:active + &,
  &:active,
  &.active,
  &.dropdown-toggle.show {
    color: $active-color;
    background-color: $active-background;
    border-color: $active-border;

    &:focus {
      @if $enable-shadows {
        @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
      }
    }
  }

  &:disabled,
  &.disabled {
    color: $color;
    background-color: transparent;
  }
}
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  padding: $padding-y $padding-x;
  @include font-size($font-size);
  // Manually declare to provide an override to the browser default
  @include border-radius($border-radius, 0);
}

ကွင်း

$theme-colorsခလုတ်အမျိုးကွဲများ (ပုံမှန်နှင့် အကြမ်းဖျင်းခလုတ်များအတွက်) အတွင်းရှိ မွမ်းမံမှုအတန်းများကို ထုတ်လုပ်ရန် ကျွန်ုပ်တို့၏မြေပုံနှင့် သက်ဆိုင်ရာ ရောစပ်ထားသော ပေါင်းစပ်မှုများကို အသုံးပြု ပါ scss/_buttons.scss

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

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