Dipetšhe
Ditokomane le mehlala ya dipetšhe, karolo ya rena ye nnyane ya go bala le go swaya.
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 em
diyuniti. 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
Mohlala wa hlogoMpsha
Mohlala wa hlogoMpsha
Mohlala wa hlogoMpsha
Mohlala wa hlogoMpsha
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 .badge
le 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 .badge
sehlopha 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-dark
bakeng 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
.
<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-hidden
sehlopha.
Dipetšhe tša dipilisi
Diriša .rounded-pill
sehlopha sa utility go dira gore dipetšhe di be nkgokolo kudu ka 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>
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;