တံဆိပ်များ

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

ဤစာမျက်နှာတွင်

ဥပမာများ

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

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

တံဆိပ်၏အသွင်အပြင်ကို လျင်မြန်စွာပြောင်းလဲရန် ကျွန်ုပ်တို့၏နောက်ခံ အသုံးဝင်မှုအတန်းများကို အသုံးပြုပါ။ Bootstrap ၏မူလပုံစံကိုအသုံးပြုသောအခါ၊ မှန်ကန်သောပုံစံပြုလုပ်ရန်အတွက် .bg-lightစာသားအရောင်အသုံးအဆောင်တစ်ခု လိုအပ်ကြောင်း ကျေးဇူးပြု၍ သတိပြုပါ ။ .text-darkအဘယ်ကြောင့်ဆိုသော် နောက်ခံအသုံးအဆောင်များသည် မည်သည့်အရာကိုမျှ မသတ်မှတ်ထားသောကြောင့် background-colorဖြစ်သည်။

မူလတန်း အလယ်တန်း အောင်မြင်မှု အန္တရာယ် သတိပေးချက် အချက်အလက် အလင်း မှောငျမိုကျသော

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

အကူအညီပေးသောနည်းပညာများကို အဓိပ္ပာယ်ဖွင့်ဆိုခြင်း။

အဓိပ္ပါယ်ထည့်ရန် အရောင်ကိုအသုံးပြုခြင်းသည် မျက်နှာပြင်ဖတ်စက်များကဲ့သို့သော အထောက်အကူနည်းပညာများကို အသုံးပြုသူများထံ ပေးပို့မည်မဟုတ်သည့် အမြင်အာရုံညွှန်ပြမှုတစ်ခုသာဖြစ်သည်။ အရောင်ဖြင့် ဖော်ပြထားသော အချက်အလက်သည် အကြောင်းအရာ ကိုယ်တိုင် (ဥပမာ မြင်နိုင်သော စာသား) သို့မဟုတ် .visually-hiddenအတန်းထဲတွင် ဝှက်ထားသော အပိုစာသားများကဲ့သို့ အခြားနည်းလမ်းများဖြင့် ပါဝင်ကြောင်း သေချာပါစေ။

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

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

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

ဆူး

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

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