Tutoriales básicos de Bootstrap

Plugin de Bootstrap

Páginas de Bootstrap Barra de navegación de Bootstrap

Navegación de pan de Bootstrap

El breadcrumb (navegación de breadcrumb) es una forma de visualización basada en la información jerárquica del sitio web. Por ejemplo, en un blog, el breadcrumb puede mostrar la fecha de publicación, la categoría o las etiquetas. Representan la posición actual de la página en la estructura de navegación.

El breadcrumb (navegación de breadcrumb) en Bootstrap es una navegación simple con .breadcrumb class de la lista desordenada. Los separadores se agregarán automáticamente mediante la clase como se muestra a continuación en CSS(bootstrap.min.css):

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

A continuación se muestra un ejemplo de navegación de breadcrumb:

Ejemplo en línea

Ejemplo

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap　Ejemplo　-　导航路径</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">Diciembre</li>
</ul>
</body>
</html>

Prueba y mira ‹/›

Los resultados se muestran a continuación:

Páginas de Bootstrap Barra de navegación de Bootstrap