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.
Una barra de navegación es una barra de navegación horizontal que tiene elementos, botones, menús desplegables, etc.
Clases utilizadas:
- 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í.
Variable utilizada:
| Nombre | Descripción | Escribe | Valor | Valor calculado | Tipo calculado |
|---|---|---|---|---|---|
| $navbar-fondo-color | Esto proporciona color al fondo. | variable | $esquema-principal | hsl(0, 0%, 100%) | color |
| $navbar-box-shadow-size | Esta variable se utiliza para definir el tamaño de la sombra de la barra de navegación. | Talla | 0 2 píxeles 0 0 | ||
| $navbar-box-sombra-color | Esta variable se utiliza para definir el color de la sombra de la barra de navegación. | variable | $fondo | hsl(0, 0%, 96%) | color |
| $navbar-height | Esta variable se utiliza para definir la altura de la barra de navegación. | Talla | 3,25 rem | ||
| $navbar-relleno-vertical | Esta variable se utiliza para definir el relleno vertical en la barra de navegación. | Talla | 1 rem | ||
| $navbar-relleno-horizontal | Esta variable se utiliza para definir el relleno horizontal en la barra de navegación. | Talla | 2 rem | ||
| $barra-z | Esta variable se utiliza para definir el nivel en el que desea colocar su barra de navegación. | cuerda | 30 | ||
| $navbar-fixed-z | Esta variable se utiliza para definir el nivel fijo de la barra de navegación. | cuerda | 30 | ||
| $navbar-item-color | Esta variable se utiliza para definir el color del elemento en la barra de navegación. | variable | $texto | hsl(0, 0%, 29%) | color |
| $navbar-item-hover-color | Esta variable se usa para definir el color del elemento en la barra de navegación al pasar el mouse. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $navbar-item-hover-background-color | Esta variable se usa para definir el color de fondo del elemento en la barra de navegación al pasar el mouse. | variable | $esquema-principal-bis | hsl(0, 0%, 98%) | color |
| $navbar-elemento-color-activo | Esta variable se utiliza para proporcionar color únicamente a los elementos activos. | variable | $esquema-invertir | hsl(0, 0%, 4%) | color |
| $navbar-item-active-background-color | Esta variable se usa para proporcionar el color de fondo al elemento activo de la barra de navegación al pasar el mouse. | cuerda | transparente | ||
| $navbar-item-img-max-height | Esta variable se utiliza para proporcionar la altura máxima de la imagen en la barra de navegación. | Talla | 1,75 rem | ||
| $navbar-hamburguesa-color | Esta variable se usa para dar color a la hamburguesa de la barra de navegación. | variable | $navbar-item-color | ||
| $navbar-tab-hover-background-color | Esta variable se usa para proporcionar color de fondo a la pestaña de la barra de navegación al pasar el mouse. | cuerda | transparente | ||
| $navbar-tab-hover-border-bottom-color | Esta variable se usa para proporcionar color al borde inferior de la pestaña de la barra de navegación al pasar el mouse. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $navbar-tab-color-activo | Esta variable se usa para dar color a las pestañas activas de la barra de navegación. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $navbar-tab-active-background-color | Esta variable se usa para proporcionar color de fondo a las pestañas activas de la barra de navegación. | cuerda | transparente | ||
| $navbar-tab-active-border-bottom-color | Esta variable se usa para dar color al borde inferior activo de la barra de navegación. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $navbar-tab-active-border-bottom-style | Esta variable se utiliza para definir el estilo del borde inferior activo. | cuerda | sólido | ||
| $navbar-tab-active-border-bottom-width | Esta variable se utiliza para definir el ancho de la parte inferior activa del borde. | Talla | 3 píxeles | ||
| $navbar-desplegable-fondo-color | Esta variable se utiliza para definir el color de fondo del menú desplegable de la barra de navegación. | variable | $esquema-principal | hsl(0, 0%, 100%) | color |
| $navbar-dropdown-border-superior | Esta variable se utiliza para proporcionar el efecto de borde superior en el menú desplegable de la barra de navegación. | Talla | Borde $sólido de 2px | ||
| $navbar-desplegable-desplazamiento | Esta variable se utiliza para proporcionar el efecto de compensación en el menú desplegable de la barra de navegación. | Talla | -4 píxeles | ||
| $barra-de-navegación-flecha-desplegable | Esta variable se usa para proporcionar un efecto de flecha en el menú desplegable de la barra de navegación. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $navbar-desplegable-radio | Esta variable se utiliza para proporcionar el efecto de radio en el menú desplegable de la barra de navegación. | variable | $radio-grande | 6px | Talla |
| $navbar-desplegable-z | Esta variable se utiliza para definir el nivel de su elemento en la página web. | cuerda | 20 | ||
| $navbar-dropdown-boxed-radius | Esta variable se usa para proporcionar el efecto de radio encuadrado en el menú desplegable de la barra de navegación. | variable | $radio-grande | 6px | Talla |
| $navbar-dropdown-boxed-shadow | Esta variable se usa para proporcionar el efecto de sombra encuadrado en el menú desplegable de la barra de navegación. | sombra | 0 8px 8px bulmaRgba($esquema-invertir, 0.1), 0 0 0 1px bulmaRgba($esquema-invertir, 0.1) | ||
| $navbar-dropdown-item-hover-color | Esta variable se usa para proporcionar el color al menú desplegable de la barra de navegación. | variable | $esquema-invertir | hsl(0, 0%, 4%) | color |
| $navbar-dropdown-item-hover-background-color | Esta variable se usa para proporcionar color de fondo al elemento de la barra de navegación al pasar el mouse. | variable | $fondo | hsl(0, 0%, 96%) | color |
| $navbar-dropdown-item-color-activo | Esta variable se utiliza para proporcionar el color al elemento activo del menú desplegable. | variable | $enlace | hsl(229, 53%, 53%) | color |
| $navbar-dropdown-item-active-background-color | Esta variable se utiliza para proporcionar un color de fondo al elemento activo del menú desplegable. | variable | $fondo | hsl(0, 0%, 96%) | color |
| $navbar-divisor-fondo-color | Esta variable se usa para proporcionar el color de fondo al divisor de la barra de navegación. | variable | $fondo | hsl(0, 0%, 96%) | color |
| $navbar-divisor-height | Esta variable se usa para proporcionar altura al divisor de la barra de navegación. | Talla | 2 píxeles | ||
| $navbar-bottom-box-shadow-size | Esta variable se utiliza para proporcionar el tamaño de la sombra del cuadro de la barra de navegación. | Talla | 0 -2 píxeles 0 0 | ||
| $navbar-punto de interrupción | Esta variable se utiliza para proporcionar el punto de interrupción de la barra de navegación cuando disminuimos o aumentamos el tamaño de la pantalla. | variable | $escritorio | 960px + (2 * $brecha) | calculado |
| $navbar-colores | Esta variable se utiliza para definir el color de la barra de navegación. | variable | $colores | colores bulma | mapa |
Sintaxis:
<nav class="navbar">
<div class="...">
...
</div>
</nav>
Sintaxis de la variable:
$property-name: property-value;
Ejemplo 1: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de la barra de navegación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<nav class="navbar">
<div class="navbar-menu">
<a class="navbar-item">
Menu 1
</a>
<a class="navbar-item">
Menu 2
</a>
<a class="navbar-item">
Menu 3
</a>
<a class="navbar-item">
Menu 4
</a>
<a class="navbar-item">
Menu 5
</a>
<a class="navbar-item">
Menu 6
</a>
</div>
</nav>
</body>
</html>
Código SCSS:
$navbar-colors: lightgreen;
.navbar{
background-color:$navbar-colors;
}
Código CSS compilado:
.navbar {
background-color: lightgreen;
}
Producción:
Ejemplo 2: en el siguiente código, utilizaremos la variable anterior para demostrar el uso de la barra de navegación.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</script>
<link rel="stylesheet" href="style.css">
<style>
.title{
color:green;
}
nav{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<h1 class="title has-text-centered">
GeekforGeeks
</h1>
<h3 class="subtitle has-text-centered">
A computer science portal for geeks.
</h3>
<nav class="navbar">
<div class="navbar-menu">
<a class="navbar-item">
Menu 1
</a>
<a class="navbar-item">
Menu 2
</a>
<a class="navbar-item">
Menu 3
</a>
<a class="navbar-item">
Menu 4
</a>
<a class="navbar-item">
Menu 5
</a>
<a class="navbar-item">
Menu 6
</a>
</div>
</nav>
</body>
</html>
Código SCSS:
$navbar-colors: green;
.navbar-item{
color:$navbar-colors;
}
Código CSS compilado:
.navbar-item {
color: green;
}
Producción:
Referencia: https://bulma.io/documentation/components/navbar/
Publicación traducida automáticamente
Artículo escrito por bhaluram18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA