Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
En Bulma, Breadcrumb es un componente de navegación simple. Para navegar por el componente solo necesitamos un contenedor de migas de pan y una lista ul . En este artículo, aprenderemos sobre Bulma Breadcrumb Alignment.
Clases de alineación de migas de pan de Bulma:
- is-centered: se utiliza para la alineación central del contenedor de migas de pan.
- is-left: Se utiliza para la alineación izquierda del contenedor de migas de pan.
- is-right: Se utiliza para la alineación correcta del contenedor de migas de pan.
Sintaxis:
<nav class="breadcrumb Alignment-Classes">
<ul>
......
</ul>
</nav>
El siguiente ejemplo ilustra la alineación de migas de pan de Bulma:
Ejemplo 1: El siguiente ejemplo demuestra la clase centrada en la ruta de navegación.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Breadcrumb Alignment</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alignment</b><br><br> <nav class="breadcrumb is-centered" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav> </body> </html>
Producción:
Alineación central
Ejemplo 2: El siguiente ejemplo demuestra la clase is-left para la ruta de navegación.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Breadcrumb Alignment</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body > <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alignment</b><br><br> <nav class="breadcrumb is-left" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav> </body> </html>
Producción:
Alineación a la izquierda
Ejemplo 3: El siguiente ejemplo demuestra la clase correcta para la ruta de navegación .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Breadcrumb Alignment</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h2 class="is-size-2 has-text-success"> GeeksforGeeks </h2> <b>Bulma Breadcrumb Alignment</b><br><br> <nav class="breadcrumb is-right" aria-label="breadcrumbs"> <ul> <li class="is-active"> <a href="#">GeeksforGeeks</a> </li> <li><a href="#">Courses</a></li> <li><a href="#">Practice</a></li> <li><a href="#">Jobs</a></li> </ul> </nav> </body> </html>
Producción:
Alineación a la derecha
Referencia: https://bulma.io/documentation/components/breadcrumb/#alignment
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA