Spectre Breadcrumbs nos ofrece diseñar migas de pan. Las migas de pan se utilizan para indicar la ubicación de la página actual dentro de una jerarquía de navegación.
Para usar migas de pan, necesita un elemento contenedor con la clase de migas de pan . Agregue elementos secundarios con la clase breadcrumb-item .
Clase de migas de pan Spectre:
- breadcrumb: esta clase se utiliza para crear elementos de breadcrumbs.
- elemento de migas de pan: esta clase se utiliza para crear un elemento específico de migas de pan.
Sintaxis:
<ul class="breadcrumb">
<li class="breadcrumb-item">
....
</li>
</ul>
Ejemplo: El siguiente ejemplo ilustra el Spectre Breadcrumbs.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet"
href=
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css">
<style>
.breadcrumb {
margin-left: 15%;
}
</style>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Breadcrumbs Class</strong>
</center>
<br>
<strong>Breadcrumbs:</strong>
<ul class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Tutorials</a>
</li>
<li class="breadcrumb-item">
<a href="#">Web Technologies</a>
</li>
<li class="breadcrumb-item">
<a href="#">HTML Tutorial... -Spectre Tutorial</a>
</li>
</ul>
</body>
</html>
Producción:
Migas de pan de espectro
Referencia: https://picturepan2.github.io/spectre/components/breadcrumbs.html#breadcrumbs
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA