Bootstrap4 Tutoriales básicos

Bootstrap4 Formulario Bootstrap4 Barra de navegación

Bootstrap4 Objeto multimedia

Navegación de pan de molde (Breadcrumb)

La navegación de pan de molde es un plan de navegación que indica a los usuarios la ubicación de la página actual en el sitio web o la aplicación. La navegación de pan de molde puede mejorar enormemente la accesibilidad de los sitios web con muchos páginas o una estructura de navegación compleja.

La navegación de pan de molde es una forma de visualización basada en la información jerárquica del sitio web. Por ejemplo, en un blog, la navegación de pan de molde puede mostrar la fecha de publicación, la categoría o las etiquetas. Representan la posición de la página actual en la estructura de navegación, y son una ayuda de navegación en la interfaz de usuario. .breadcrumb La navegación de pan de molde en Bootstrap es una navegación simple con

.breadcrumb-item　+　.breadcrumb-item::before {
　　display: inline-block;
　　padding-right: 0.5rem;
　　color: "#6c757d;
　　content: "/";
}

Sólo hay que usar la clase .breadcrumb de la lista ordenada para crear un diseño estático de pan de molde con Bootstrap, como se muestra a continuación en el siguiente Bootstrap4 Ejemplo de navegación de pan de molde

Ejemplo

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<ol class="breadcrumb">
　　<li class="breadcrumb-item active">Inicio</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Inicio</a></li>
　　<li class="breadcrumb-item active">Biblioteca</li>
</ol>
<ol class="breadcrumb">
　　<li class="breadcrumb-item"><a href="#">Inicio</a></li>
　　<li class="breadcrumb-item"><a href="#">Biblioteca</a></li>
　　<li class="breadcrumb-item active">Data</li>
</ol>
</body>
</html>

Prueba y mira ‹/›

También podemos omitir el formato de lista:

Bootstrap4 Ejemplo de navegación de pan de molde

!DOCTYPE html
<html>
<head>
　　<title>Bootstrap　示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav　class="breadcrumb">
　　<a　class="breadcrumb-item"　href="#">Home</a>
　　<a　class="breadcrumb-item"　href="#">Library</a>
　　<a　class="breadcrumb-item"　href="#">Data</a>
　　<span　class="breadcrumb-item　active">Bootstrap</span>
</nav>
</body>
</html>

Prueba y mira ‹/›

El efecto después de ejecutar es el siguiente:

Bootstrap4 Formulario Bootstrap4 Barra de navegación