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

html

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

html

<button type="button" class="btn btn-primary">
  Notifications <span class="badge text-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.

html

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

html

<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

E okeditšwe ka go v5.2.0

Bea a background-colorka go fapana foreground colorle bathuši ba rena.text-bg-{color} . Pele go be go nyakega go kopanya ka seatla kgetho ya gago ya .text-{color}le .bg-{color}didirišwa tša go dira setaele, tšeo o sa dutšego o ka di diriša ge e ba o rata.

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

html

<span class="badge text-bg-primary">Primary</span>
<span class="badge text-bg-secondary">Secondary</span>
<span class="badge text-bg-success">Success</span>
<span class="badge text-bg-danger">Danger</span>
<span class="badge text-bg-warning">Warning</span>
<span class="badge text-bg-info">Info</span>
<span class="badge text-bg-light">Light</span>
<span class="badge text-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

html

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

CSS

Diphetogo

E okeditšwe ka go v5.2.0

Bjalo ka karolo ya mokgwa wa go fetoga wa diphetogo tša CSS wa Bootstrap, dipetšhe bjale di šomiša diphetogo tša CSS tša selegae godimo .badgebakeng sa go tlwaetša nako ya nnete ye e kaonafetšego. Ditekanyetšo tša diphetogo tša CSS di beakantšwe ka Sass, ka fao go tlwaetša Sass go sa thekgwa, le gona.

  --#{$prefix}badge-padding-x: #{$badge-padding-x};
  --#{$prefix}badge-padding-y: #{$badge-padding-y};
  @include rfs($badge-font-size, --#{$prefix}badge-font-size);
  --#{$prefix}badge-font-weight: #{$badge-font-weight};
  --#{$prefix}badge-color: #{$badge-color};
  --#{$prefix}badge-border-radius: #{$badge-border-radius};

Diphetogo tša Sass

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