တံဆိပ်များ

တံဆိပ်များအတွက် စာရွက်စာတမ်းနှင့် နမူနာများ၊ ကျွန်ုပ်တို့၏ အရေအတွက်အသေးစားနှင့် အညွှန်းတပ်ခြင်း အစိတ်အပိုင်း။

ဥပမာ

emဆွေမျိုးဖောင့်အရွယ်အစားနှင့် ယူနစ် များကို အသုံးပြုခြင်းဖြင့် ချက်ခြင်းပင်မဒြပ်စင်၏ အရွယ်အစားနှင့် ကိုက်ညီရန် တံဆိပ်များစကေး ။

<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>

တံဆိပ်များကို ကောင်တာပေးဆောင်ရန် လင့်ခ်များ သို့မဟုတ် ခလုတ်များ အစိတ်အပိုင်းအဖြစ် အသုံးပြုနိုင်သည်။

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

၎င်းတို့ကိုအသုံးပြုပုံပေါ်မူတည်၍ တံဆိပ်များသည် စခရင်ဖတ်သူများနှင့် အလားတူအကူအညီနည်းပညာများကို အသုံးပြုသူများအတွက် ရှုပ်ထွေးနိုင်သည်ကို သတိပြုပါ။ တံဆိပ်များ၏ပုံစံသည် ၎င်းတို့၏ရည်ရွယ်ချက်အတွက် အမြင်အာရုံကို ပံ့ပိုးပေးသော်လည်း၊ ဤအသုံးပြုသူများသည် တံဆိပ်၏အကြောင်းအရာကို ရိုးရိုးရှင်းရှင်းတင်ပြပါမည်။ သီးခြားအခြေအနေပေါ်မူတည်၍ ဤတံဆိပ်များသည် စာကြောင်းတစ်ခု၏အဆုံး၊ လင့်ခ် သို့မဟုတ် ခလုတ်တစ်ခု၏အဆုံးတွင် ကျပန်းနောက်ထပ်စကားလုံးများ သို့မဟုတ် နံပါတ်များကဲ့သို့ ထင်ရနိုင်သည်။

အကြောင်းအရာသည် ရှင်းလင်းခြင်းမရှိပါက (“အကြောင်းကြားချက်များ” ဥပမာအားဖြင့်၊ “၄” သည် အကြောင်းကြားချက်အရေအတွက်ဖြစ်ကြောင်း နားလည်ထားသည့်)၊ ထပ်လောင်းအကြောင်းအရာကို အမြင်အာရုံဝှက်ထားသော အပိုစာသားအပိုင်းနှင့်အတူ ထည့်သွင်းစဉ်းစားပါ။

<button type="button" class="btn btn-primary">
  Profile <span class="badge badge-light">9</span>
  <span class="sr-only">unread messages</span>
</button>

ဆက်စပ်မူကွဲများ

တံဆိပ်၏အသွင်အပြင်ကိုပြောင်းလဲရန် အောက်ဖော်ပြပါ မွမ်းမံမှုအတန်းများထဲမှ တစ်ခုခုကို ထည့်ပါ။

<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တံဆိပ်များကို ပိုဝိုင်းအောင်ပြုလုပ်ရန် ပြုပြင်မွမ်းမံမှုအတန်းအစားကို အသုံးပြု ပါ။ v3 မှ တံဆိပ်များလွတ်သွားပါက အသုံးဝင်ပါသည်။border-radiuspadding

<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>

လင့်များ

ဒြပ်စင်တစ်ခု ပေါ်ရှိ အကြောင်းအရာဆိုင်ရာ .badge-*အတန်းများကို အသုံးပြုခြင်းဖြင့် လုပ်ဆောင် နိုင်သော တံဆိပ်များကို ခုန်ပြီး အာရုံစူးစိုက်မှု အခြေအနေများကို လျင်မြန်စွာ ပေးဆောင်သည်။<a>

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>