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 una barra de navegación horizontal que tiene elementos de la barra de navegación, botones, menú desplegable, etc.
Clases de estructura de Bulma Navbar:
- barra de navegación: Es el componente principal.
- navbar-brand: Podemos colocar el logo usando esta clase.
- navbar-burger: También se le llama icono de hamburguesa en la esquina izquierda de la barra de navegación.
- menú de la barra de navegación: la parte derecha de la pantalla solo es visible en el modo de escritorio.
- navbar-item: los elementos de la barra de navegación se muestran utilizando esta clase.
- navbar-link: esta clase se utiliza para establecer los enlaces a otras rutas.
- navbar-dropdown: esta clase se utiliza para configurar el menú desplegable.
- navbar-divider: esta clase se usa para establecer la línea horizontal que puede separar los elementos de la barra de navegación entre sí.
Sintaxis:
<nav class="navbar">
<div class="...">
...
</div>
</nav>
Ejemplo 1: supongamos que queremos crear una barra de navegación que tiene un logotipo en la parte izquierda y tiene algunos elementos, un menú desplegable que podemos crear usando las clases anteriores. El código siguiente muestra una barra de navegación básica que utiliza las clases de componentes 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 Basic Navbar</b> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="https://www.geeksforgeeks.org/"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" width="112" height="38"> </a> </div> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Menu1 </a> <a class="navbar-item"> Menu2 </a> <a class="navbar-item"> Menu3 </a> <a class="navbar-item"> Menu4 </a> <a class="navbar-item"> Menu5 </a> <a class="navbar-item"> Menu6 </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Dropdown </a> </div> </div> </div> </nav> </body> </html>
Producción:
Barra de navegación básica de Bulma
Ejemplo 2: El siguiente código muestra la barra de navegación como se muestra en el código anterior junto con la clase navbar-end .
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 Basic Navbar</b> <nav class="navbar" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="https://www.geeksforgeeks.org/"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" width="112" height="38"> </a> </div> <div class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item"> Menu1 </a> <a class="navbar-item"> Menu2 </a> <a class="navbar-item"> Menu3 </a> <a class="navbar-item"> Menu4 </a> <a class="navbar-item"> Menu5 </a> <a class="navbar-item"> Menu6 </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Dropdown </a> <div class="navbar-dropdown"> <a class="navbar-item"> Profile </a> <a class="navbar-item"> Messages </a> <a class="navbar-item"> Contact infpo </a> </div> </div> </div> <div class="navbar-end"> <div class="navbar-item"> <div> <a class="button is-family-secondary"> <strong>Login</strong> </a> <a class="button is-primary"> <strong>Sign up</strong> </a> </div> </div> </div> </div> </nav> </body> </html>
Producción:
Barra de navegación básica de Bulma
Referencia: https://bulma.io/documentation/components/navbar/#basic-navbar
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA