Primer CSS es un marco CSS gratuito de código abierto que se basa en sistemas que crean la base de los elementos de estilo básicos, como el espaciado, la tipografía y el color. Es altamente reutilizable y flexible. Está creado con el sistema de diseño de GitHub.
Primer CSS nos ofrece muchos componentes, y Breadcrumbs es uno de ellos. En este artículo, aprenderemos sobre las 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 representar el contenido que muestra rutas divididas, se utilizan migas de pan.
Primer CSS Breadcrumbs Clases utilizadas:
- breadcrumb-item: esta clase se utiliza para que el elemento respectivo implemente esta utilidad.
Sintaxis:
<div class="breadcrumb-item">
...
</div>
Ejemplo: Este ejemplo demuestra el uso de Primer CSS Breadcrumbs utilizando la clase breadcrumb-item .
HTML
<!DOCTYPE html> <html> <head> <title>Primer CSS Breadcrumbs</title> <link rel="stylesheet" href= "https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> </head> <body style="margin:100px"> <div class="text-center"> <h1 class="color-fg-success"> GeeksforGeeks </h1> <h3><u>Primer CSS Breadcrumbs</u></h3><br /> </div> <div class="d-flex flex-justify-center"> <div aria-label="Breadcrumb"> <ol> <li class="breadcrumb-item"> <a href="#">Home Section</a> </li> <li class="breadcrumb-item"> <a href="#">Previous Section</a> </li> <li class="breadcrumb-item breadcrumb-item-selected"> <a href="#" aria-current="page">Section selected</a> </li> </ol> </div> </div> <br /> <div class="d-flex flex-justify-center"> <div aria-label="Breadcrumb"> <ol> <li class="breadcrumb-item"> <a href="#">Home</a> </li> <li class="breadcrumb-item"> <a href="#">Geeks for Geeks</a> </li> <li class="breadcrumb-item breadcrumb-item-selected"> <a href="#" aria-current="page">Articles</a> </li> </ol> </div> </div> </body> </html>
Producción:
Migas de pan
Referencia: https://primer.style/css/components/breadcrumb
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA