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

Tutorial di Base Bootstrap

Plugin Bootstrap

Medaglie Bootstrap

Questo capitolo spiega le medaglie (Badges) di Bootstrap. Le medaglie sono simili ai tag, ma la differenza principale è che le medaglie hanno angoli più arrotondati.

Le medaglie (Badges) sono principalmente usate per evidenziare nuovi o messaggi non letti. Per usare una medaglia, è sufficiente aggiungere <span> Aggiungi al link, alla navigazione Bootstrap e ad altri elementi simili.

Ecco un esempio che dimostra questo:

Esempio online

Mostra le email non lette:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap Esempio - Medaglie (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="#">Posta in arrivo <span class="badge">50</span></a>
</body>
</html>
Prova a Vedere ‹/›

I risultati sono come segue:

Quando non ci sono nuovi o messaggi non letti, tramite CSS della :empty Il selettore, le targhette si ripiegano, indicando che non ci sono contenuti all'interno.

Esempio online

Mostra messaggi non letti:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
　　　　<title>Esempio Bootstrap - Etichette</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>Targhette</h2>
　　<p>.badge classe specifica il numero di messaggi non letti:</p>
　　<p><a href="#">Posta in arrivo <span class="badge">21</span></a></p>
</div>
</body>
</html>
Prova a Vedere ‹/›

Stato attivo della navigazione

Puoi posizionare le targhette attive nella navigazione a pillole e nella navigazione elenco. Utilizzando <span> Ecco come attivare i collegamenti, come nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Esempio Bootstrap - Stato attivo della navigazione</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>Stato attivo della navigazione a pillole</h4>
<ul class="nav nav-pills">
	<li class="active"><a href="#">Home <span class="badge">42</span></a></li>
	<li><a href="#">Introduzione</a></li>
	<li><a href="#">Messaggi <span class="badge">3</span></a></li>
</ul>
<br>
<h4>Stato attivo della navigazione elenco</h4>
<ul class="nav nav-pills nav-stacked" style="max-width: 260px;">
	<li class="active">
		<a href="#">
			<span class="badge pull-right">42</span>
			Pagina Iniziale
		</a>
	</li>
	<li><a href="#">Introduzione</a></li>
	<li>
		<a href="#">
			<span class="badge pull-right">3</span>
			Messaggio
		</a>
	</li>
</ul>
</body>
</html>
Prova a Vedere ‹/›

I risultati sono come segue:

Schermo di Grandi Dimensioni BootstrapEtichette Bootstrap