Bootstrap 4 ခလုတ်
ခလုတ်ပုံစံများ
Bootstrap 4 သည် မတူညီသော ခလုတ်ပုံစံများကို ပံ့ပိုးပေးသည်-
ဥပမာ
<button type="button" class="btn">Basic</button>
<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-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-dark">Dark</button>
<button
type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
ခလုတ်အတန်းများကို <a>, <button>, သို့မဟုတ်
<input>element များတွင် သုံးနိုင်သည်-
ဥပမာ
<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" မက်ဆေ့ချ်ကို မရရှိနိုင်သောကြောင့် လင့်ခ်အဖြစ် # ထားခဲ့ပါသည်။ လက်တွေ့ဘဝတွင် ၎င်းသည် "Search" စာမျက်နှာသို့ အမှန်တကယ် URL ဖြစ်သင့်ပါသည်။
ခလုတ်ကောက်ကြောင်း
Bootstrap 4 တွင် ကောက်ကြောင်း/ဘောင်ရှိသော ခလုတ်ရှစ်ခုကို ပံ့ပိုးပေးသည်-
ဥပမာ
<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-info">Info</button>
<button
type="button" class="btn btn-outline-warning">Warning</button>
<button
type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button
type="button" class="btn btn-outline-light text-dark">Light</button>
ခလုတ်အရွယ်အစားများ
.btn-lgခလုတ်ကြီးများ သို့မဟုတ် ခလုတ်ငယ်များအတွက် အတန်း ကို အသုံးပြု .btn-smပါ-
ဥပမာ
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
အဆင့်ခလုတ်များကိုပိတ်ပါ။
.btn-blockပင်မဒြပ်စင်၏ အကျယ်အဝန်းတစ်ခုလုံးကို ချဲ့ထွင်နိုင်သော ဘလောက်အဆင့်ခလုတ်ကို ဖန်တီးရန် အတန်းကို ထည့်ပါ ။
ဥပမာ
<button type="button" class="btn btn-primary btn-block">Full-Width
Button</button>
အသုံးပြုနေသော/ပိတ်ထားသော ခလုတ်များ
ခလုတ်တစ်ခုအား အသက်ဝင်သော (ဖိထားပုံပေါ်သည်) သို့မဟုတ် ပိတ်ထားသော (နှိပ်၍မရသော) အခြေအနေသို့ သတ်မှတ်နိုင်သည်-
အတန်း .activeသည် ခလုတ်တစ်ခုကို ဖိပြီး ပေါ်လာစေပြီး disabledattribute သည် ခလုတ်ကို နှိပ်၍မရတော့ပါ။ .disabled<a> ဒြပ်စင်များသည် disabled attribute ကို မပံ့ပိုးသောကြောင့် အမြင်အားဖြင့် disabled ဖြစ်အောင် class ကို အသုံးပြုရမည်ဖြစ်ကြောင်း သတိပြုပါ ။
ဥပမာ
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary
disabled">Disabled Link</a>
Spinner ခလုတ်များ
ကျွန်ုပ်တို့၏ BS4 Spinners ကျူတိုရီရယ် တွင် သင်ပိုမိုလေ့လာသိရှိနိုင်စေမည့် ခလုတ်တစ်ခုသို့ "spinners" ကို သင်ထည့်သွင်းနိုင်သည် ။
ဥပမာ
<button class="btn btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
</button>
<button class="btn
btn-primary">
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button
class="btn btn-primary" disabled>
<span class="spinner-border
spinner-border-sm"></span>
Loading..
</button>
<button class="btn btn-primary" disabled>
<span
class="spinner-grow spinner-grow-sm"></span>
Loading..
</button>