English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Tutorial básico Bootstrap

Plugins Bootstrap

Etiqueta do Bootstrap

Este capítulo explicará o Bootstrap Etiqueta. As etiquetas podem ser usadas para contagem, dicas ou outras marcas na página. Use classes .label Para mostrar etiquetas, conforme o exemplo a seguir:

Exemplos online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　etiqueta/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>
<h1>Exemplo de Título <span class="label label-default">Rótulo</span></h1>
<h2>Exemplo de Título <span class="label label-default">Rótulo</span></h2>
<h2>Exemplo de Título <span class="label label-default">Rótulo</span></h2>
<h4>Exemplo de Título <span class="label label-default">Rótulo</span></h4>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos a seguir:

Você pode usar classes modificadoras etiqueta-padrão、etiqueta-primário、etiqueta-sucesso、etiqueta-informação、etiqueta-aviso、etiqueta-perigo Modifique a aparência das etiquetas, conforme o exemplo a seguir:

Exemplos online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Exemplo Bootstrap　-　Variantes de etiqueta</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>
<span class="label label-padrão">Etiqueta padrão</span>
<span class="label label-primário">Etiqueta principal</span>
<span class="label label-sucesso">Etiqueta de sucesso</span>
<span class="label label-info">Etiqueta de información</span>
<span class="label label-aviso">Aviso etiqueta</span>
<span class="label label-danger">Etiqueta de perigo</span>
</body>
</html>
Teste e veja ‹/›

Os resultados são exibidos a seguir:

Mais exemplos de etiquetas

ClasseDescriçãoExemplo
.label label-defaultEtiqueta cinza padrãoExperimente
.label label-successEtiqueta verde do tipo "success"Experimente
.label label-warningEtiqueta amarela do tipo "warning"Experimente
Bling do BootstrapPaginação do Bootstrap