Bulma es un marco CSS gratuito y de código abierto que tiene sus propios componentes prediseñados que facilitan la creación de sitios web rápidos y receptivos. En este artículo, veremos dos clases de Bulma, que son navbar-start y navbar-end .
Bulma Navbar start y navbar end Clases:
- navbar-start: es el elemento secundario directo del contenedor del menú de la barra de navegación de Bulma que se encuentra dentro del componente de la barra de navegación y puede contener cualquier cantidad de elementos de la barra de navegación. En los tamaños de pantalla de escritorio y superiores (>= 1024 px), el contenedor de inicio de la barra de navegación aparecerá a la izquierda .
- navbar-end: es el elemento secundario directo del contenedor del menú de la barra de navegación de Bulma que se encuentra dentro del componente de la barra de navegación y puede contener cualquier número de elementos de la barra de navegación. En los tamaños de pantalla de escritorio y superiores (>= 1024 px), el contenedor final de la barra de navegación aparecerá a la derecha .
Sintaxis:
<nav class="navbar">
<div class="navbar-menu">
<div class="navbar-start">
...
</div>
<div class="navbar-end">
...
</div>
</div>
</nav>
Ejemplo: en el siguiente ejemplo, el color de fondo del inicio de la barra de navegación se establece en el color primario y el color de fondo del final de la barra de navegación se establece en el color del enlace para que sea más fácil distinguir entre los dos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Navbar start and Navbar end
</title>
<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>
Bulma Navbar start
and Navbar end
</b>
<div class="container">
<nav class="navbar is-transparent">
<div class="navbar-barand">
<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 has-background-primary">
<a class="navbar-item" href="#">
Home
</a>
<a class="navbar-item" href="#">
Practice
</a>
</div>
<div class="navbar-end has-background-link">
<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>
<p class="mt-6">
<b>Here the
<i>navbar-start</i>
has primary color background and the
<i>navbar-end</i>
has link color background
</b>
</p>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/components/navbar/#navbar-start-and-navbar-end