Bootstrap 4 တံဆိပ်များ
နမူနာခေါင်းစဉ်အသစ်
နမူနာခေါင်းစဉ်အသစ်
နမူနာခေါင်းစဉ်အသစ်
နမူနာခေါင်းစဉ်အသစ်
နမူနာခေါင်းစဉ်အသစ်
နမူနာခေါင်းစဉ်အသစ်
မည်သည့်အကြောင်းအရာသို့မဆို အပိုအချက်အလက်များထည့်ရန် တံဆိပ်များကို အသုံးပြုသည်။
စတုဂံတံဆိပ်များဖန်တီးရန် ဒြပ်စင် များအတွင်း .badge
အကြောင်းအရာဆိုင်ရာ အတန်းအစား (ကဲ့သို့ .badge-secondary
) အတန်းကို တွဲ သုံး ပါ။ <span>
ပင်မဒြပ်စင်၏ အရွယ်အစားနှင့် ကိုက်ညီရန် တံဆိပ်များစကေးကို သတိပြုပါ (ရှိပါက)
ဥပမာ
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
ဆက်စပ်တံဆိပ်များ
မူလတန်း
အလယ်တန်း
အောင်မြင်မှု
အန္တရာယ်
သတိပေးချက်
အချက်အလက်
အလင်း
မှောငျမိုကျသော
.badge-*
တံဆိပ်တစ်ခု၏အရောင်ကိုပြောင်းလဲရန် ဆက်စပ်အကြောင်းအရာအတန်းများ ( ) ကိုသုံး ပါ-
ဥပမာ
<span class="badge badge-primary">Primary</span>
<span class="badge
badge-secondary">Secondary</span>
<span class="badge
badge-success">Success</span>
<span class="badge
badge-danger">Danger</span>
<span class="badge
badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge
badge-dark">Dark</span>
ဆေးလုံးတံဆိပ်များ
မူလတန်း
အလယ်တန်း
အောင်မြင်မှု
အန္တရာယ်
သတိပေးချက်
အချက်အလက်
အလင်း
မှောငျမိုကျသော
.badge-pill
တံဆိပ်များကို ပိုမိုဝိုင်းစေရန် အတန်းကို အသုံးပြု ပါ-
ဥပမာ
<span class="badge badge-pill badge-primary">Primary</span>
<span
class="badge badge-pill badge-secondary">Secondary</span>
<span
class="badge badge-pill badge-success">Success</span>
<span class="badge
badge-pill badge-danger">Danger</span>
<span class="badge badge-pill
badge-warning">Warning</span>
<span class="badge badge-pill
badge-info">Info</span>
<span class="badge badge-pill
badge-light">Light</span>
<span class="badge badge-pill
badge-dark">Dark</span>
Element တစ်ခုအတွင်းရှိ တံဆိပ်
ခလုတ်တစ်ခုအတွင်း တံဆိပ်တစ်ခုအသုံးပြုခြင်း၏ ဥပမာတစ်ခု။
ဥပမာ
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>