Bootstrap 4 Kentekens
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Voorbeeld opskrif Nuut
Kentekens word gebruik om bykomende inligting by enige inhoud te voeg. Gebruik die .badge
klas saam met 'n kontekstuele klas (soos .badge-secondary
) binne <span>
elemente om reghoekige kentekens te skep. Let daarop dat kentekens skaal om by die grootte van die ouerelement te pas (indien enige):
Voorbeeld
<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>
Kontekstuele Kentekens
Primêr
Sekondêr
Sukses
Gevaar
Waarskuwing
Inligting
Lig
Donker
Gebruik enige van die kontekstuele klasse ( .badge-*
) om die kleur van 'n kenteken te verander:
Voorbeeld
<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>
Pil Kentekens
Primêr
Sekondêr
Sukses
Gevaar
Waarskuwing
Inligting
Lig
Donker
Gebruik die .badge-pill
klas om die kentekens meer rond te maak:
Voorbeeld
<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>
Kenteken binne 'n element
'n Voorbeeld van die gebruik van 'n kenteken binne 'n knoppie:
Voorbeeld
<button type="button" class="btn btn-primary">
Messages <span
class="badge badge-light">4</span>
</button>