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, una ruta de navegación 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 Sizes .
Bulma Breadcrumb Tamaños Clases:
- is-small: Se utiliza para pan rallado de pequeño tamaño.
- is-medium: Se utiliza para pan rallado de tamaño medio.
- is-large: Se utiliza para pan rallado de gran tamaño.
Sintaxis:
<nav class="breadcrumb Sizes-Classes">
<ul>
.......
</ul>
</nav>
El siguiente ejemplo ilustra los tamaños de migas de pan de Bulma:
Ejemplo 1: el siguiente código demuestra la clase de tamaño pequeño de la ruta de navegación .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Breadcrumb Sizes</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 Sizes</b><br><br> <nav class="breadcrumb is-small" 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:
Pan rallado de tamaño pequeño
Ejemplo 2: El siguiente código demuestra la clase de tamaño medio de la ruta de navegación .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Breadcrumb Sizes</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 Sizes</b><br><br> <nav class="breadcrumb is-medium" 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:
Pan rallado de tamaño mediano
Ejemplo 3: El siguiente código demuestra la clase de tamaño grande de la ruta de navegación.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Breadcrumb Sizes</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 Sizes</b><br><br> <nav class="breadcrumb is-large" 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:
Pan rallado de tamaño grande
Referencia: https://bulma.io/documentation/components/breadcrumb/#sizes
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA