Bulma es un marco CSS que se envía con componentes prediseñados para facilitar a los desarrolladores la creación de sitios web hermosos y receptivos. Está basado en flexbox . En el artículo, veremos cómo usar Navbar Brand en Bulma .
La marca Navbar es el lado izquierdo de la barra de navegación que puede contener elementos de barra de navegación y una hamburguesa de barra de navegación como el último elemento secundario. La marca de la barra de navegación siempre está visible para el usuario, independientemente del tamaño de la ventana gráfica.
Clases de la marca Bulma Navbar:
- navbar-brand: esta clase define un contenedor que contiene los elementos de la barra de navegación y la hamburguesa de la barra de navegación. Está en el lado izquierdo del menú de la barra de navegación.
- navbar-burger: esta clase se usa como el último elemento secundario del contenedor navbar-brand . Contiene tres etiquetas de intervalo vacías que muestran el botón de menú de hamburguesas en dispositivos táctiles, o el botón de cruz cuando el menú de hamburguesas está activo.
Sintaxis:
<div class="navbar-brand">
<div class="navbar-item">
...
</div>
<a role="button" class="navbar-burger">
...
</a>
</div>
Ejemplo: El siguiente ejemplo muestra el uso de la clase navbar-brand en Bulma. En el resultado a continuación, la marca de la barra de navegación tiene un color de fondo principal.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.navbar {
margin-top: 20px;
padding: 10px;
}
</style>
</head>
<body class="has-text-centered has-navbar-fixed-bottom">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">Bulma Navbar Brand</b>
<div class="container">
<nav class="navbar is-transparent">
<!-- Navbar Brand -->
<div class="navbar-brand has-background-primary">
<a class="navbar-item"
href="https://geeksforgeeks.org">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220121204016/gfglogo300x152-200x101.png">
</a>
<div class="navbar-burger"
data-target="nav1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="nav1" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Practice
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-info">
Algorithms
</button>
</p>
<p class="control">
<button class="button
is-info is-outlined">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Producción:
Marca Bulma Navbar
Referencia: https://bulma.io/documentation/components/navbar/#navbar-brand