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 de navegación horizontal que tiene algunos elementos, enlaces, botones, etc. Los elementos de la barra de navegación son elementos repetibles que pueden ser enlaces, logotipos, menús desplegables, texto, etc. La clase de elementos de la barra de navegación se puede usar con un ancla etiqueta <a> o etiqueta <div> .
Sintaxis:
<a class="navbar-item">
<-- Navbar items -->
</a>
Ejemplo 1: cuando queramos crear algunos elementos de la barra de navegación usando la clase navbar-item , consulte el siguiente código.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Navbar items</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma Navbar items</b> <div class="navbar-item"> <a class="navbar-item">Home</a> <a class="navbar-item">Menu</a> <a class="navbar-item">Login</a> </div> </body> </html>
Producción:
Ejemplo 2: cuando queremos crear algunos elementos con un menú desplegable usando la clase navbar-item y has-dropdown , consulta el siguiente código.
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Navbar items</title> <link rel='stylesheet' href= 'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'> </head> <body> <h1 class="is-size-2 has-text-success">GeeksforGeeks</h1> <b class="is-size-4">Bulma Navbar items</b> <div class="navbar-item has-dropdown"> <a class="navbar-item">Home</a> <a class="navbar-item">Menu</a> <a class="navbar-item">Login</a> <a class="navbar-link"> GeeksforGeeks </a> <div class="navbar-dropdown"> <-- dropdown items --> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/components/navbar/#navbar-item
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA