Latest web development tutorials

distintivo bootstrap

Questo capitolo spiegherà distintivi Bootstrap (badge). Distintivi e modifiche simili, la differenza principale è che il distintivo angoli più arrotondati.

Badge (badge) è utilizzato principalmente per gli elementi nuovi o non letti evidenziate. Per utilizzare il badge, basta mettere<span class = "badge"> aggiunto al link, navigazione Bootstrap, ecc Questi elementi possono essere.

L'esempio che segue illustra questo punto:

Esempi

Mostra messaggi non letti:

<A href = "#"> Posta elettronica < arco class = "badge"> 50 < / span> </ a>

Prova »

I risultati sono i seguenti:

Badges (Badge)

Quando non ci sono nuovi o non letti oggetti, attraverso ilCSS: vuoto selettore, badge saranno piegati, mostrando l'interno vuoto.

Esempi

Visualizza non letti scompaiono:

<div class = "contenitore"> <H2> distintivo </ h2> <P> classe .badge specifica il numero di messaggi non letti: </ p> <P> <a href = "#"> Posta in arrivo <span class = "badge"> 21 < / span> </ a> </ p> </ Div>

Prova »

stato di navigazione Attivato

È possibile inserire un badge in una navigazione capsula di stato e lista attiva la navigazione. Utilizzando il<span class = "badge"> per attivare il collegamento, come mostrato nel seguente esempio:

Esempi

<H4> capsula navigazione attiva </ h4> <ul class = "nav nav-pillole" > <Li class = "attiva"> <A href = "#"> casa <span class = "badge"> 42 < / span> </ A> </ Li> <LI> <A href = "#"> Introduzione </ a> </ Li> <LI> <A href = "#"> news <span class = "badge"> 3 < / span> </ A> </ Li> </ Ul> <Br> <H4> elenco di navigazione attiva </ h4> <ul class = "nav nav-pillole nav -stacked" style = "max-width: 260px ;"> <Li class = "attiva"> <A href = "#"> <span class = "badge pull-destra" > 42 </ span> Home </ a> </ Li> <LI> <A href = "#"> Introduzione </ a> </ Li> <LI> <A href = "#"> <span class = "badge pull-destra" > 3 </ span> news </ a> </ Li> </ Ul>

Prova »

I risultati sono i seguenti:

stato di navigazione Attivato