Bootstrap JS ခလုတ်
JS ခလုတ် (button.js)
သင့်ခလုတ်များကို ပိုမိုထိန်းချုပ်လိုပါက ဤပလပ်အင်ကို အသုံးပြုပါ။
Buttons အကြောင်း သင်ခန်းစာအတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap Buttons Tutorial ကို ဖတ်ရှုပါ ။
Button Plugin အတန်းများ
အောက်ဖော်ပြပါ အတန်းများသည် <a>၊ <button>၊ သို့မဟုတ် <input> element တစ်ခုခုကို ပုံစံဆင်ရန် အသုံးပြုနိုင်သည်။
Class | Description | Example |
---|---|---|
.btn | Adds basic styling to any button | |
.btn-default | Indicates a default/standard button | |
.btn-primary | Provides extra visual weight and identifies the primary action in a set of buttons | |
.btn-success | Indicates a successful or positive action | |
.btn-info | Contextual button for informational alert messages | |
.btn-warning | Indicates caution should be taken with this action | |
.btn-danger | Indicates a dangerous or potentially negative action | |
.btn-link | Makes a button look like a link (will still have button behavior) | |
.btn-lg | Makes a large button | |
.btn-sm | Makes a small button | |
.btn-xs | Makes an extra small button | |
.btn-block | Makes a block-level button (spans the full width of the parent element) | |
.active | Makes the button appear pressed | |
.disabled | Makes the button disabled |
JavaScript မှတဆင့်
ကိုယ်တိုင်ဖွင့်ပါ-
$('.btn').button();
ခလုတ်ရွေးချယ်မှုများ
None |
ခလုတ်နည်းလမ်းများ
အောက်ပါဇယားတွင် ရနိုင်သောခလုတ်နည်းလမ်းများအားလုံးကို စာရင်းပြုစုထားသည်။
မှတ်ချက်- ဤပလပ်အင်အတွက်၊ နည်းလမ်းများကို ဒေတာ attribute များမှတစ်ဆင့်လည်း ပေးပို့နိုင်သည်။ data-toggle သို့မဟုတ် data-loading တွင်ကဲ့သို့ method name ကို data- သို့ ပေါင်းထည့်ပါ။
Method | Description | Try it |
---|---|---|
.button("toggle") | Makes the button look pressed | |
.button("loading") | Disables the button and changes the button text to "loading..." | |
.button("reset") | Changes the button text to original text (if changed) | |
.button("string") | Specifies a new button text |
နောက်ထပ် ဥပမာများ
ခလုတ်များကို စိတ်ကြိုက်ပြင်ဆင်ရန် CSS ကိုအသုံးပြုခြင်း။
လုံးဝန်းသောဘောင်များကို ဖယ်ရှားနည်း
ဥပမာ
.btn-default {
border-radius: 0;
}
သီးခြားအရောင်ထည့်နည်း
ဥပမာ
.btn-default {
background: #000;
color: #fff;
}
.btn-default:hover {
background: #fff;
color: #000;
}
အရိပ်ထည့်နည်း
ဥပမာ
.btn-default {
box-shadow: 1px 2px 5px #000000;
}