ဥပမာများ

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

ခေါင်းစဉ်များ

<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
<h6>Example heading <span class="badge bg-secondary">New</span></h6>

ခလုတ်များ

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

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-bg-secondary">4</span>
</button>

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

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

နေရာယူထားသည်။

.badgeလင့်ခ်တစ်ခု သို့မဟုတ် ခလုတ်တစ်ခု၏ထောင့်တွင် ၎င်းကို မွမ်းမံပြင်ဆင်ရန် အသုံးဝင်ပစ္စည်းများကို အသုံးပြု ပါ။

<button type="button" class="btn btn-primary position-relative">
  Inbox
  <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
    99+
    <span class="visually-hidden">unread messages</span>
  </span>
</button>

.badgeပိုမိုယေဘုယျညွှန်းကိန်းအတွက် ရေတွက်ခြင်းမရှိဘဲ အတန်းကို အသုံးဝင်မှုအနည်းငယ် ဖြင့်လည်း အစားထိုးနိုင်သည် ။

<button type="button" class="btn btn-primary position-relative">
  Profile
  <span class="position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</button>

နောက်ခံအရောင်များ

ကျွန်ုပ်တို့၏ အကူအညီပေးသူများbackground-color နှင့် ဆန့်ကျင်ဘက်ရှေ့မျက်နှာစာ colorဖြင့် သတ်မှတ်ပါ ။ ယခင်က သင့်ရွေးချယ်မှု နှင့် စတိုင်လ်အတွက် အသုံးအဆောင်ပစ္စည်းများကို ကိုယ်တိုင်တွဲချိတ်ရန် လိုအပ်ပြီး သင်နှစ်သက်ပါက ဆက်လက်အသုံးပြုနိုင်ပါသည်။.text-bg-{color}.text-{color}.bg-{color}

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

ဆေးတံဆိပ်များ

.rounded-pillပိုကြီးသော တံဆိပ်များကို ပိုမိုဝိုင်းစက်စေရန် utility class ကို သုံး ပါ border-radius။

<span class="badge rounded-pill text-bg-primary">Primary</span>
<span class="badge rounded-pill text-bg-secondary">Secondary</span>
<span class="badge rounded-pill text-bg-success">Success</span>
<span class="badge rounded-pill text-bg-danger">Danger</span>
<span class="badge rounded-pill text-bg-warning">Warning</span>
<span class="badge rounded-pill text-bg-info">Info</span>
<span class="badge rounded-pill text-bg-light">Light</span>
<span class="badge rounded-pill text-bg-dark">Dark</span>

CSS

ကိန်းရှင်များ

Bootstrap ၏ တိုးတက်ပြောင်းလဲနေသော CSS variables ချဉ်းကပ်မှု၏ တစ်စိတ်တစ်ပိုင်းအနေဖြင့်၊ ယခုအခါ တံဆိပ်များ .badgeကို ပိုမိုကောင်းမွန်အောင် အချိန်နှင့်တပြေးညီ စိတ်ကြိုက်ပြင်ဆင်ရန်အတွက် စက်တွင်းရှိ CSS variables များကို အသုံးပြုပါသည်။ CSS variable များအတွက် တန်ဖိုးများကို Sass မှတစ်ဆင့် သတ်မှတ်ပေးထားသောကြောင့် Sass စိတ်ကြိုက်ပြင်ဆင်ခြင်းကိုလည်း ပံ့ပိုးထားပါသည်။

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};
  

Sass ကိန်းရှင်များ

$badge-font-size:                   .75em;
$badge-font-weight:                 $font-weight-bold;
$badge-color:                       $white;
$badge-padding-y:                   .35em;
$badge-padding-x:                   .65em;
$badge-border-radius:               $border-radius;