ခလုတ်များ

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

စာသားထုပ်ပိုးခြင်းကို ပိတ်ပါ။

ခလုတ်စာသားကို မချုပ်စေချင်ပါက၊ .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>

မိဘတစ်ခု၏ အကျယ်အဝန်းကို ပေါင်းထည့်ခြင်းဖြင့် ပိတ်ဆို့အဆင့်ခလုတ်များ—ဖန်တီးပါ .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 ကို လုံးဝတွေ့လိမ့်မည်မဟုတ်ပါ။
• အထောက်အကူနည်းပညာများအတွက် ဒြပ်စင်၏အခြေအနေအား ညွှန်ပြရန်အတွက် အသုံးပြုသည့်ပိတ်ထားသောခလုတ် <a>များတွင် ပါဝင်သင့်သည် ။aria-disabled="true"
• အသုံးပြု၍ပိတ်ထားသောခလုတ် များတွင် attribute <a> မပါဝင်သင့်ပါ ။href

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

ချိတ်ဆက်လုပ်ဆောင်နိုင်စွမ်း သတိပေးချက်

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

<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">
  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> 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" checked> Active
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option2"> Radio
  </label>
  <label class="btn btn-secondary">
    <input type="radio" name="options" id="option3"> Radio
  </label>
</div>

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