Bulma barra de navegación – Barcelona Geeks

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.

En este artículo, veremos Bulma Navbar. Una barra de navegación es un componente muy importante de cualquier sitio web. Bulma proporciona una barra de navegación horizontal receptiva junto con las imágenes, enlaces, botones y menús desplegables.

Clases de barra de navegación de Bulma:

barra de navegación: esta clase se utiliza para crear un contenido principal de la barra de navegación.
navbar-brand: esta clase se usa para agregar un logotipo de encabezado o texto de encabezado en una barra de navegación.
navbar-burger: esta clase se utiliza para crear un icono de hamburguesa que alterna el menú de la barra de navegación en dispositivos de pantalla pequeña.
navbar-menu: esta clase se usa para agregar menús o elementos junto a navbar-brand.
navbar-start: esta clase se usa al comienzo de la barra de navegación.
navbar-end: esta clase se usa al final de la barra de navegación, comenzando con el último elemento de la barra de navegación.
navbar-item: esta clase se usa para agregar un elemento a la barra de navegación.
navbar-link: esta clase se utiliza para vincular el menú desplegable.
navbar-dropdown: esta clase se usa para crear un menú desplegable que consta de elementos de la barra de navegación.
navbar-divider: esta clase se usa para agregar una línea horizontal para separar los elementos.

Sintaxis:

<nav class="navbar" role="navigation" 
  aria-label="main navigation">
  <div class="navbar-brand">
    ...
    <a role="button" class="navbar-burger" 
    aria-label="menu">
      ...
    </a>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item"> Home </a>
      ...
    </div>   
    <div class="navbar-end">
      ...
    </div>
 </div>
</nav>

Ejemplo: El siguiente ejemplo ilustra la barra de navegación de Bulma usando las clases anteriores.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0" />
     
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
     
  </head>
  <body>
    <div class="container">
        <!-- Navbar Starts here -->
      <nav class="navbar is-light" role="navigation"
           aria-label="main navigation">
 
        <!-- Navbar Brand containing the Heading -->
        <div class="navbar-brand">
          <a class="navbar-item has-background-success" href="#">
            <h1 class="has-text-white">GeeksforGeeks</h1>
          </a>
 
          <!-- Burger Icons for responsive navbar -->
          <a role="button"
            class="navbar-burger"
            aria-label="menu"
            aria-expanded="false"
            data-target="navbarBasicExample"
          >
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
          </a>
        </div>
 
        <!-- Navbar Menu containing a list of items -->
        <div id="navbarBasicExample" class="navbar-menu">
          <div class="navbar-start">
            <a class="navbar-item"> Home </a>
 
            <a class="navbar-item"> Blogs </a>
 
            <div class="navbar-item has-dropdown is-hoverable">
              <a class="navbar-link"> More </a>
 
              <div class="navbar-dropdown">
                <a class="navbar-item"> About us </a>
                <a class="navbar-item"> Tutorials </a>
                <a class="navbar-item"> Practice </a>
              </div>
            </div>
          </div>
 
          <!-- Navbar End containing Sign Up and Sign In Buttons -->
          <div class="navbar-end">
            <div class="navbar-item">
              <div class="buttons">
                <a class="button is-success">
                  <strong>Sign up</strong>
                </a>
                <a class="button is-light"> Log in </a>
              </div>
            </div>
          </div>
        </div>
      </nav>
    </div>
  </body>
</html>

Producción:

Enlace de referencia: https://bulma.io/documentation/components/navbar/

Publicación traducida automáticamente

Artículo escrito por tarunsinghwap7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta