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

Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Medalla de Bootstrap

Este capítulo explicará el.Badges de Bootstrap. Los Badges son similares a las etiquetas, la principal diferencia es que los Badges tienen bordes más redondeados.

las placas(Badges)se utilizan principalmente para resaltar elementos nuevos o no leídos. Si desea usar placas, simplemente coloque <span> simplemente añádalo a enlaces, navegación Bootstrap y otros elementos.

el siguiente ejemplo demuestra esto:

ejemplo en línea

mostrar correos no leídos:

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　ejemplo　-　placas(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="#">Buzón　<span　class="placa">50</span></a>
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

cuando no hay nuevos o mensajes no leídos, a través de CSS de :vacío los selectores, las placas se doblan hacia arriba, lo que indica que no hay contenido adentro.

ejemplo en línea

mostrar mensajes no leídos:

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>Bootstrap　ejemplo　-　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="contenedor">
　　<h2>placa</h2>
　　<p>.clase placa especifica la cantidad de mensajes no leídos:</p>
　　<p><a　href="#">bandeja de entrada　<span　class="placa">21</span></a></p>
</div>
</body>
</html>
Prueba y observa ‹/›

estado activo de la navegación

Puede colocar placas en la navegación de píldoras y lista en estado activo. Al usar <span> para activar enlaces, como se muestra en el siguiente ejemplo:

ejemplo en línea

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
	<title>Bootstrap　ejemplo　-　estado activo de la navegación</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 activo de la navegación de píldoras</h4>
<ul　class="navegación　nav-píldoras">
	<li　class="activo"><a　href="#">página de inicio　<span　class="placa">42</span></a></li>
	<li><a href="#">Introducción</a></li>
	<li><a　href="#">mensajes　<span　class="placa">3</span></a></li>
</ul>
<br>
<h4>estado activo de la navegación de lista</h4>
<ul　class="navegación　nav-píldoras　navegación-apilado"　estilo="max-ancho:　260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			Página principal
		</a>
	</li>
	<li><a href="#">Introducción</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			mensaje
		</a>
	</li>
</ul>
</body>
</html>
Prueba y observa ‹/›

Los resultados se muestran a continuación:

Pantalla extra grande de BootstrapEtiqueta de Bootstrap