Bulma es un framework CSS de código abierto desarrollado por Jeremy Thomas. Este marco se basa en la propiedad CSS Flexbox . Es altamente receptivo, minimizando el uso de consultas de medios para un comportamiento receptivo.
La barra de navegación es la barra horizontal que tiene elementos, enlaces, botones, etc. Tiene un menú de barra de navegación que consta de elementos de menú. Es el hermano de la marca navbar. El menú de la barra de navegación es invisible en dispositivos táctiles de menos de 1024 px. Si queremos mostrar este menú también en dispositivos táctiles, debemos agregar una clase activa .
Clases del menú de la barra de navegación de Bulma:
- navbar-menu: Esta es la clase utilizada para configurar el menú de la barra de navegación.
- navbar-brand: esta es la clase utilizada para establecer el logotipo de la barra de navegación.
- navbar-start: esta es la clase utilizada para establecer el inicio o la parte izquierda de la barra de navegación.
- navbar-end: esta es la clase utilizada para establecer el final o la parte derecha de la barra de navegación.
Sintaxis:
<nav class="navbar">
<div class="navbar-menu-class">
<!-- menu items -->
</div>
</nav>
Para dispositivos táctiles o dispositivos móviles:
<div class="navbar-menu is-active"> <!-- visible in mobile devices too --> </div>
Ejemplo 1: supongamos que queremos crear un menú de barra de navegación con algunos elementos y un logotipo, luego podemos usar fácilmente la clase navbar-brand (para el logotipo) y navbar-menu . El menú de la barra de navegación se divide en dos partes, es decir , el inicio de la barra de navegación y el final de la barra de navegación. El inicio de la barra de navegación es la parte izquierda del menú de la barra de navegación y el final de la barra de navegación es la parte derecha del menú.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Navbar Basic</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4">Bulma Navbar Menu </b> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <!-- navbar items and navbar burger... --> <a class="navbar-item" href="https://www.geeksforgeeks.org/"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" width="112" height="28" alt="GFG"> </a> </div> <div class="navbar-menu"> <!-- navbar start, navbar end --> <div class="navbar-start"> <a class="navbar-item" >Item1</a> <a class="navbar-item" >Item2</a> <a class="navbar-item" >Item3</a> <a class="navbar-item" >Item4</a> <a class="navbar-item" >Item5</a> </div> <div class="navbar-end"> <a class="navbar-item" >Item5</a> <a class="navbar-item" >Item6</a> <a class="navbar-item" >Item7</a> </div> </div> </nav> </body> </html>
Producción:
Ejemplo 2: cuando queremos mostrar este menú de la barra de navegación en dispositivos táctiles o dispositivos móviles cuyo tamaño de pantalla es pequeño, use la clase de modificador is-active en el div del menú de la barra de navegación .
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Navbar Basic</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body class="has-text-centered"> <h1 class="is-size-2 has-text-success"> GeeksforGeeks </h1> <b class="is-size-4">Bulma Navbar Menu </b> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <!-- navbar items and navbar burger... --> <a class="navbar-item" href="https://www.geeksforgeeks.org/"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210420155809/gfg-new-logo.png" width="112" height="28" alt="GFG"> </a> </div> <!-- show content in mobile devices using is-active class--> <div class="navbar-menu is-active"> <!-- navbar start, navbar end --> <div class="navbar-start"> <a class="navbar-item" >GFG1</a> <a class="navbar-item" >GFG2</a> <a class="navbar-item" >GFG3</a> <a class="navbar-item" >GFG4</a> <a class="navbar-item" >GFG5</a> <a class="navbar-item" >GFG6</a> </div> </div> </nav> </body> </html>
Producción:
usando la clase de modificador is-active
Enlace de referencia : https://bulma.io/documentation/components/navbar/#navbar-menu
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA