Bootstrap ခလုတ်များ
ခလုတ်ပုံစံများ
Bootstrap သည် မတူညီသော ခလုတ်ပုံစံများကို ပံ့ပိုးပေးသည်-
အထက်ဖော်ပြပါ ခလုတ်ပုံစံများကို ရရှိရန်၊ Bootstrap တွင် အောက်ပါ အတန်းများ ရှိသည်။
.btn.btn-default.btn-primary.btn-success.btn-info.btn-warning.btn-danger.btn-link
အောက်ပါဥပမာသည် မတူညီသောခလုတ်ပုံစံများအတွက် ကုဒ်ကိုပြသသည်-
ဥပမာ
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
<a>ခလုတ်အတန်းများကို ၊ <button>၊ သို့မဟုတ်
<input>ဒြပ်စင် ပေါ်တွင် သုံးနိုင်သည် -
ဥပမာ
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
လင့်ခ်၏ href attribute တွင် # ကို အဘယ်ကြောင့်ထည့်ရသနည်း။
ကျွန်ုပ်တို့တွင် ၎င်းကို လင့်ခ်ချိတ်ရန် မည်သည့်စာမျက်နှာမှ မရှိတော့သောကြောင့် "404" မက်ဆေ့ချ်ကို မရရှိနိုင်သောကြောင့် ကျွန်ုပ်တို့၏ နမူနာများတွင် # လင့်ခ်အဖြစ် ထည့်သွင်းထားပါသည်။ ၎င်းသည် သီးခြားစာမျက်နှာတစ်ခုသို့ တကယ့် URL ဖြစ်သင့်သည်။
ခလုတ်အရွယ်အစားများ
Bootstrap သည် ခလုတ်အရွယ်အစား လေးခုကို ပံ့ပိုးပေးသည်-
အရွယ်အစားအမျိုးမျိုးကို သတ်မှတ်သည့် အတန်းများမှာ-
.btn-lg.btn-sm.btn-xs
အောက်ဖော်ပြပါ ဥပမာတွင် မတူညီသော ခလုတ်အရွယ်အစားများအတွက် ကုဒ်ကို ပြသည်-
ဥပမာ
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
<button type="button" class="btn btn-primary btn-xs">XSmall</button>
အဆင့်ခလုတ်များကိုပိတ်ပါ။
ဘလောက်အဆင့်ခလုတ်တစ်ခုသည် ပင်မဒြပ်စင်၏ အကျယ်ကို ဖြန့်ကျက်သည်။
.btn-blockပိတ်ဆို့အဆင့်ခလုတ်တစ်ခုဖန်တီးရန် အတန်းကိုထည့်ပါ -
ဥပမာ
<button type="button" class="btn btn-primary btn-block">Button 1</button>
အသုံးပြုနေသော/ပိတ်ထားသော ခလုတ်များ
ခလုတ်တစ်ခုအား အသက်ဝင်သော (ဖိထားပုံပေါ်သည်) သို့မဟုတ် ပိတ်ထားသော (နှိပ်၍မရသော) အခြေအနေသို့ သတ်မှတ်နိုင်သည်-
အတန်း .activeသည် ခလုတ်တစ်ခုကို နှိပ်လိုက်သည်ကို ပေါ်လာစေပြီး အတန်း
.disabled
သည် ခလုတ်တစ်ခုကို နှိပ်မရနိုင်အောင် ပြုလုပ်သည်-
ဥပမာ
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary disabled">Disabled Primary</button>
ပြီးပြည့်စုံသော Bootstrap ခလုတ်ရည်ညွှန်း
ခလုတ်အတန်းများအားလုံး၏ အပြည့်အစုံကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ ပြီးပြည့်စုံသော Bootstrap Button Reference သို့ သွားပါ ။