Ultimele tutoriale de dezvoltare web
 

Bootstrap Badges and Labels


insignele

Insignele sunt indicatori numerici de cât de multe elemente sunt asociate cu un link:

News 5
Comentarii 10
Actualizări 2

Numerele (5, 10, and 2) sunt ecusoane.

Utilizați .badge clasa în termen de <span> elemente pentru a crea insigne:

Exemplu

<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>
Încearcă - l singur »

Insignele pot fi, de asemenea, utilizate în interiorul altor elemente, cum ar fi butoanele:



Următorul exemplu arată cum să adăugați insigne butoane:

Exemplu

<button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>
Încearcă - l singur »

etichete

Etichetele sunt folosite pentru a furniza informații suplimentare despre ceva:

exemplu nou

exemplu nou

exemplu nou

exemplu nou

exemplu nou
exemplu nou

Utilizați .label clasa, urmată de una dintre cele șase clase contextuale .label-default , .label-primary , .label-success , .label-info , .label-warning sau .label-danger , într - un <span> elementul pentru a crea o etichetă:

Exemplu

<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>
Încearcă - l singur »

Următorul exemplu arată toate clasele de etichete contextuale:

Implicit Label Label primar de succes Label Info Etichetă Etichetă de avertizare Pericol Label

Exemplu

<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>
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»