Dipetšhe

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

Mohlala

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.

Mohlala wa hlogoMpsha

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

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 badge-light">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.

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

Diphapano tša diteng

Oketša efe goba efe ya dihlopha tša sefetoši tše di boletšwego ka mo tlase go fetoša ponagalo ya betšhe.

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

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

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 .sr-onlysehlopha.

Dipetšhe tša dipilisi

Šomiša .badge-pillsehlopha sa sefetoši go dira gore dipetšhe di be nkgokolo kudu (ka go border-radiusrapalala mo gogolo le ga tlaleletšo padding). E na le mohola ge o foša dipetšhe go tšwa go v3.

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

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

Dikgokagano

.badge-*Go šomiša diklase tša diteng godimo ga <a>elemente ka pela go fa dipetšhe tše di ka tšewago kgato ka maemo a go hover le a go tsepamiša kgopolo.

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

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