Bulma Breadcrumb es un componente de navegación simple que se puede usar para navegar por las páginas. Esto se puede usar para ver la página donde se encuentra un usuario actualmente y también para volver a una página anterior. En este artículo, aprenderemos sobre los separadores alternativos de migas de pan, que se utilizan para separar estas migas de pan.
Separadores Alternativos Bulma Breadcrumb Clases:
- has-arrow-separator: Se utiliza para proporcionar una navegación en forma de flecha a los componentes.
- has-bullet-separator: Se utiliza para dar una navegación tipo viñeta a los componentes.
- has-dot-separator: Se utiliza para dar una navegación tipo punto a los componentes.
- has-succeeds-separator: Se utiliza para dar exitos como navegacion a los componentes.
Sintaxis:
<nav class="breadcrumb alternative-separator-class">
<ul>
......
</ul>
</nav>
Ejemplo 1: En este ejemplo, usaremos el Separador de flechas .
HTML
<!DOCTYPE html> <html> <head> <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 Alternative Separators</b><br><br> <nav class="breadcrumb has-arrow-separator" 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:
Separadores alternativos de pan rallado Bulma
Ejemplo 2: En este ejemplo, usaremos el Bullet Separator.
HTML
<!DOCTYPE html> <html> <head> <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 Alternative Separators</b> <br><br> <nav class="breadcrumb has-bullet-separator" 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:
Separadores alternativos de pan rallado Bulma
Ejemplo 3: En este ejemplo, usaremos el separador de puntos.
HTML
<!DOCTYPE html> <html> <head> <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 Alternative Separators</b> <br><br> <nav class="breadcrumb has-dot-separator" 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:
Separadores alternativos de pan rallado Bulma
Ejemplo 4: En este ejemplo, usaremos el Separador de éxitos.
HTML
<!DOCTYPE html> <html> <head> <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 Alternative Separators</b> <br><br> <nav class="breadcrumb has-succeeds-separator" 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:
Separadores alternativos de pan rallado Bulma
Enlace de referencia: https://bulma.io/documentation/components/breadcrumb/#alternative-separators
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA