တံဆိပ်များ

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

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

ဥပမာများ

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;