Bootstrap- kentekens en -etikette


Kentekens

Kentekens is numeriese aanwysers van hoeveel items met 'n skakel geassosieer word:

Nuus5
Kommentaar10
Opdaterings2

Die nommers (5, 10 en 2) is die kentekens.

Gebruik die .badgeklas binne <span>elemente om kentekens te skep:

Voorbeeld

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

Kentekens kan ook binne ander elemente gebruik word, soos knoppies:



Die volgende voorbeeld wys hoe om kentekens by knoppies te voeg:

Voorbeeld

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>


Etikette

Etikette word gebruik om bykomende inligting oor iets te verskaf:

Voorbeeld Nuut

Voorbeeld Nuut

Voorbeeld Nuut

Voorbeeld Nuut

Voorbeeld Nuut
Voorbeeld Nuut

Gebruik die .labelklas, gevolg deur een van die ses kontekstuele klasse .label-default, .label-primary, .label-success, .label-info, .label-warningof .label-danger, binne 'n <span>element om 'n etiket te skep:

Voorbeeld

<h1>Example <span class="label label-default">New</span></h1>
<h2>Example <span class="label label-default">New</span></h2>
<h3>Example <span class="label label-default">New</span></h3>
<h4>Example <span class="label label-default">New</span></h4>
<h5>Example <span class="label label-default">New</span></h5>
<h6>Example <span class="label label-default">New</span></h6>

Die volgende voorbeeld toon alle kontekstuele etiketklasse:

Versteketiket Primêre Etiket Sukses Etiket Info Etiket Waarskuwing Etiket Gevaar Etiket

Voorbeeld

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

Toets jouself met oefeninge

Oefening:

Na die "Comments"-teks, gebruik 'n span-element om 'n kenteken te maak met die nommer twee binne.

<button>Comments </button>