Dipetšhe

Ditokomane le mehlala ya dipetšhe, karolo ya rena ye nnyane ya go bala le go swaya.

Letlakaleng le

Mehlala

Dipetšhe di lekalekanya go swana le bogolo bja elemente ya motswadi ya kgauswi ka go šomiša bogolo bja fonte ya go lekana le emdiyuniti. Go tloga ka v5, dipetšhe ga di sa na le mekgwa ya go tsepamiša goba ya go hover bakeng sa dikgokagano.

Dihlogo tša ditaba

Mohlala wa hlogoMpsha

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

Dikonope

Dipetšhe di ka šomišwa bjalo ka karolo ya dikgokagano goba dikonope go fa sebaledi.

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

Hlokomela gore go ithekgile ka tsela yeo di dirišwago ka yona, dipetšhe di ka ba tše di gakantšhago go badiriši ba dibadi tša skrine le thekinolotši e swanago ya go thuša. Le ge setaele sa dipetšhe se nea leswao la pono mabapi le morero wa tšona, badiriši ba ba tla fo tšweletšwa ka diteng tša betšhe. Go ithekgile ka boemo bjo itšego, dipetšhe tše di ka bonagala e le mantšu a tlaleletšo a sa rulaganyetšwago goba dinomoro tšeo di lego mafelelong a polelo, kgokagano goba konotswana.

Ka ntle le ge seemo se le molaleng (bjalo ka mohlala wa “Ditsebišo”, moo go kwešišwago gore “4” ke palo ya ditsebišo), nagana ka go akaretša seemo sa tlaleletšo ka seripa sa sengwalwa sa tlaleletšo seo se utilwego ka pono.

E beilwe maemong

Šomiša didirišwa go fetoša a .badgele go e bea sekhutlong sa kgokagano goba konope.

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

O ka boela wa tšeela .badgesehlopha sebaka ka didirišwa tše dingwe tše mmalwa ntle le go bala bakeng sa sešupo sa kakaretšo kudu.

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

Mebala ya ka morago

Diriša diklase tša rena tša mohola wa ka morago go fetoša ponagalo ya betšhe ka pela. Hle ela hloko gore ge o diriša Bootstrap's default .bg-light, go na le kgonagalo ya gore o tla nyaka sedirišwa sa mmala wa sengwalwa go swana le .text-darkbakeng sa setaele se se swanetšego. Se ke ka gobane didirišwa tša ka morago ga di bee selo ge e se background-color.

Motheo Bobedi Katlego Kotsi Temošo Info Seetša Leswiswi

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

Go fetišetša tlhalošo go theknolotši ya go thuša

Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .visually-hiddensehlopha.

Dipetšhe tša dipilisi

Diriša .rounded-pillsehlopha sa utility go dira gore dipetšhe di be nkgokolo kudu ka border-radius.

Motheo Bobedi Katlego Kotsi Temošo Info Seetša Leswiswi

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

Sass

Diphetogo

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