Corso di base Bootstrap

Plugin Bootstrap

Paginazione Bootstrap Barra di navigazione Bootstrap

Navigazione di pannelli di crusto Bootstrap

La navigazione di crumb (Breadcrumbs) è un modo di visualizzazione basato sulle informazioni gerarchiche del sito. Prendiamo ad esempio un blog, la navigazione di crumb può visualizzare la data di pubblicazione, la categoria o i tag. Essi rappresentano la posizione della pagina nella struttura di navigazione.

La navigazione di crumb (Breadcrumbs) in Bootstrap è una semplice navigazione con .breadcrumb L'elenco non ordinato di classe. I separatori vengono aggiunti automaticamente tramite la classe elencata di seguito nel CSS (bootstrap.min.css):

.breadcrumb > li + li:before {
　　　　color: #CCCCCC;
　　　　content: "/ ";
　　　　padding: 0 5px;
}

Di seguito è illustrato un esempio di navigazione di crumb:

Esempio online

Esempio

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap esempio - navigazione di crumb</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>
<ul class="breadcrumb">
	<li><a href="#">Home</a></li>
	<li><a href="#">2012</a></li>
	<li class="active">Dicembre</li>
</ul>
</body>
</html>

Prova a vedere ‹/›

I risultati sono mostrati di seguito:

Paginazione Bootstrap Barra di navigazione Bootstrap