tutorial básico do Bootstrap

plugins do Bootstrap

Tela Extra Grande Bootstrap Etiqueta Bootstrap

Bilhete Bootstrap

Este capítulo explicará o badge do Bootstrap. O badge é semelhante ao rótulo, a principal diferença é que as bordas do badge são mais arredondadas.

insígnias(Badges) são usadas principalmente para destacar novos ou mensagens não lidas. Para usar insígnias, basta <span> adicioná-lo a links, navegação Bootstrap e outros elementos.

O exemplo a seguir demonstra isso:

exemplo online

exibir mensagens não lidas:

exemplo

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Exemplo do Bootstrap　-　insígnias(Badges)/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<a　href="#">Caixa de correio　<span　class="insignia">50</span></a>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Quando não há novos ou mensagens não lidas, use a CSS :empty ao usar o seletor, as insígnias se dobrarão, indicando que não há conteúdo nele.

exemplo online

exibir mensagens não lidas:

exemplo

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Exemplo do Bootstrap　-　etiquetas/title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>insígnia</h2>
　　<p>.classe　insignia　define o número de mensagens não lidas:</p>
　　<p><a　href="#">caixa de entrada　<span　class="insignia">21</span></a></p>
</div>
</body>
</html>

Teste e veja ‹/›

estado ativo da navegação

Você pode colocar insígnias no estado ativo da navegação de pilhas e lista de navegação. Utilizando <span> Para ativar links, veja o exemplo a seguir:

exemplo online

exemplo

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Exemplo do Bootstrap　-　estado ativo da navegação</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h4>estado ativo na navegação de pilhas</h4>
<ul　class="navegação　nav-pilhas">
	<li　class="ativo"><a　href="#">página inicial　<span　class="insignia">42</span></a></li>
	<li><a href="#">Introdução</a></li>
	<li><a　href="#">mensagens　<span　class="insignia">3</span></a></li>
</ul>
<br>
<h4>estado ativo na navegação de lista</h4>
<ul　class="navegação　nav-pilhas　navegação-empilhados" estilo="max-largura:　260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			Página Inicial
		</a>
	</li>
	<li><a href="#">Introdução</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			Mensagem
		</a>
	</li>
</ul>
</body>
</html>

Teste e veja ‹/›

Os resultados são exibidos conforme abaixo:

Tela Extra Grande Bootstrap Etiqueta Bootstrap