Latest web development tutorials

badge Bootstrap

Este capítulo irá explicar emblemas Bootstrap (emblemas). Emblemas e marcas semelhantes, a principal diferença é que o emblema cantos mais arredondados.

Badges (emblemas) é usado principalmente para itens novos ou não lidos em destaque. Para usar o distintivo, basta colocar<span class = "badge"> adicionado ao link, navegação Bootstrap, etc. Estes elementos podem ser.

O exemplo a seguir ilustra esse ponto:

Exemplos

Mostrar as mensagens não lidas:

<A href = "#"> Mailbox < extensão class = "badge"> 50 < / span> </ a>

tente »

Os resultados são os seguintes:

Distintivos (Badges)

Quando não houver itens novos ou não lidos, por meio daCSS: vazio selector, emblemas será dobrada, mostrando o interior vazio.

Exemplos

Mostrar não lidas desaparecem:

<Div class = "container"> <H2> emblema </ h2> <P> classe .badge especifica o número de mensagens não lidas: </ p> <P> <a href = "#"> Caixa de entrada <span class = "badge"> 21 < / span> </ a> </ p> </ Div>

tente »

estado de navegação ativado

Você pode colocar um crachá em uma navegação cápsula Estado e lista ativa de navegação. Ao usar o<class = "badge" span> para ativar o link, como mostrado no exemplo a seguir:

Exemplos

<H4> navegação cápsula ativa </ h4> <Ul class = "nav nav-pílulas" > <Li class = "ativo"> <A href = "#"> Início <span class = "badge"> 42 < / span> </ A> </ Li> <Li> <A href = "#"> Introdução </ a> </ Li> <Li> <A href = "#"> Notícias <span class = "badge"> 3 < / span> </ A> </ Li> </ Ul> <br> <H4> lista de navegação ativa </ h4> <Ul class = "nav nav-pílulas nav -stacked" style = "max-width: 260px ;"> <Li class = "ativo"> <A href = "#"> <span class = "badge pull-right" > 42 </ span> Home </ a> </ Li> <Li> <A href = "#"> Introdução </ a> </ Li> <Li> <A href = "#"> <span class = "badge pull-right" > 3 </ span> news </ a> </ Li> </ Ul>

tente »

Os resultados são os seguintes:

estado de navegação ativado