ခလုတ်များ

အရွယ်အစား၊ ပြည်နယ်များနှင့် အခြားအရာများစွာအတွက် ပံ့ပိုးမှုဖြင့် ဖောင်များ၊ ဒိုင်ယာလော့ခ်များနှင့် အခြားအရာများအတွက် လုပ်ဆောင်ချက်များအတွက် 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>

ခလုတ်များ

အတန်းများကို 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>

မိဘတစ်ခု၏ အကျယ်အဝန်းကို ပေါင်းထည့်ခြင်းဖြင့် ပိတ်ဆို့အဆင့်ခလုတ်များ—ဖန်တီးပါ .btn-block။

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>

တက်ကြွသောအခြေအနေ

ခလုတ်များ (နက်မှောင်သောနောက်ခံ၊ ပိုမှောင်သောဘောင်နှင့် ထည့်သွင်းထားသောအရိပ်) ကို နှိပ်လိုက်သောအခါတွင် ခလုတ်များပေါ်လာပါမည်။ Pseudo-Class ကို အသုံးပြုထားသောကြောင့် class တစ်ခုကို s တွင် ထည့်ရန် မလိုအပ်ပါ<button> ။ သို့သော်၊ သင်သည် အခြေအနေအား ပရိုဂရမ်ပုံစံဖြင့် ပုံတူပွားရန် လိုအပ်ပါက တူညီသောတက်ကြွသောအသွင်အပြင်ကို တွန်းအားပေး .activeနိုင်ပါသည် ။aria-pressed="true"

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

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

မည်သည့် ဒြပ်စင် disabledသို့ boolean ရည်ညွှန်းချက်ကို ပေါင်းထည့်ခြင်းဖြင့် ခလုတ်များကို မလှုပ်မ ရှားဖြစ်စေသည်။<button>

<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-eventsကျောက်ဆူးခလုတ် များအားလုံးကို ပိတ်ရန် အနာဂတ်အတွက် အဆင်ပြေသော စတိုင်အချို့ ပါဝင်ပါသည်။ ထိုပစ္စည်းကို ပံ့ပိုးပေးသည့် ဘရောက်ဆာများတွင်၊ ပိတ်ထားသော cursor ကို လုံးဝတွေ့လိမ့်မည်မဟုတ်ပါ။
• 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>

ခလုတ်ပလပ်အင်

ခလုတ်များဖြင့် ပိုမိုလုပ်ဆောင်ပါ။ ခလုတ်များကို ထိန်းချုပ်ရန် သို့မဟုတ် ကိရိယာဘားများကဲ့သို့သော နောက်ထပ်အစိတ်အပိုင်းများအတွက် ခလုတ်အုပ်စုများကို ဖန်တီးပါ။

ပြည်နယ်များကို ပြောင်းရန်

data-toggle="button"ခလုတ်တစ်ခု၏ အခြေအနေကို ပြောင်းရန် ထည့်ပါ active။ အကယ်၍ သင်သည် ခလုတ်တစ်ခုကို အကြိုခလုတ်ဖွင့်နေပါက၊ သင်သည် .activeအတန်း နှင့် aria-pressed="true" အတန်း ကို ကိုယ်တိုင်ထည့်သွင်းရပါမည် <button>။

<button type="button" class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">
  Single toggle
</button>

အမှန်ခြစ်နှင့် ရေဒီယိုခလုတ်များ

အမှန်ခြစ်ဘောက်စ် သို့မဟုတ် ရေဒီယိုစတိုင်ခလုတ်ကို ခလုတ်နှိပ်ခြင်းကို ပံ့ပိုးပေးရန် အတွက် Bootstrap ၏ .buttonစတိုင်များကို s ကဲ့သို့သော အခြားဒြပ်စင်များတွင် အသုံးချနိုင်သည် ။ JavaScript မှတစ်ဆင့် ၎င်းတို့၏ toggling အပြုအမူကို ဖွင့်ရန်နှင့် သင့်ခလုတ်များအတွင်း s ကို ပုံစံ <label>ထည့် data-toggle="buttons"သွင်း ရန် အဆိုပါမွမ်းမံထားသော ခလုတ်များပါ၀င်သည်။ ထည့်သွင်းမှုစနစ်သုံး ခလုတ်များ သို့မဟုတ် ၎င်းတို့ထဲမှ အုပ်စုများကို သင်ဖန်တီးနိုင်သည်ကို သတိပြုပါ။.btn-group.btn-group-toggle<input>

ဤခလုတ်များအတွက် အမှတ်ခြစ်ထားသော အခြေအနေကို ခလုတ် ပေါ်ရှိ အဖြစ်အပျက် မှတစ်ဆင့်သာ အပ်ဒိတ်click လုပ်ပါသည်။ ထည့်သွင်းမှုကို အပ်ဒိတ်လုပ်ရန် အခြားနည်းလမ်းကို အသုံးပြုပါက- ဥပမာ- ထည့်သွင်းမှု၏ ပိုင်ဆိုင်မှု <input type="reset">ကို ကိုယ်တိုင်အသုံးပြုခြင်းဖြင့် သို့မဟုတ် -- သင်သည် ၎င်းကို ကိုယ်တိုင်ပြောင်းရန် လိုအပ်ပါသည် ။checked.active<label>

.activeကြိုတင်စစ်ဆေးထားသော ခလုတ်များသည် အတန်းကို ထည့်သွင်းမှုတွင် ကိုယ်တိုင်ထည့်သွင်းရန် လိုအပ်ကြောင်း သတိပြုပါ <label>။

<div class="btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="checkbox" checked autocomplete="off"> Checked
  </label>
</div>

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

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