Bulma es un framework CSS moderno basado en flexbox. Tiene sus propios componentes prediseñados que facilitan la creación de sitios web receptivos y hermosos. En este artículo, veremos cómo cambiar el color de la barra de navegación en Bulma usando cualquiera de las 9 clases de modificadores de color proporcionadas por Bulma.
Clases de color de la barra de navegación:
- is-primary: esta clase se usa para cambiar el color de fondo de la barra de navegación al color primario .
- is-link: esta clase se usa para cambiar el color de fondo de la barra de navegación al color del enlace .
- is-info: esta clase se usa para cambiar el color de fondo de la barra de navegación al color de información .
- is-success: esta clase se usa para cambiar el color de fondo de la barra de navegación al color de éxito .
- is-warning: esta clase se usa para cambiar el color de fondo de la barra de navegación al color de advertencia .
- is-danger: esta clase se usa para cambiar el color de fondo de la barra de navegación al color de peligro .
- is-black: esta clase se usa para cambiar el color de fondo de la barra de navegación al color negro .
- is-dark: esta clase se usa para cambiar el color de fondo de la barra de navegación a un color oscuro.
- is-light: esta clase se usa para cambiar el color de fondo de la barra de navegación a un color claro .
- is-white: esta clase se usa para cambiar el color de fondo de la barra de navegación al color blanco .
Sintaxis:
<nav class="navbar is-link"> ... </nav>
Ejemplo: El siguiente ejemplo muestra cómo cambiar el color de fondo de la barra de navegación usando las clases de modificadores de color discutidas anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Bulma Navbar Colors</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;
border-radius: 10px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b>Bulma Navbar Colors</b>
<div class="container">
<!-- Danger Background -->
<nav class="navbar is-danger">
<div class="navbar-brand">
<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="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1"
class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"
href="#">
Home
</a>
<a class="navbar-item"
href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-primary is-outlined">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
<!-- Link Background -->
<nav class="navbar is-link">
<div class="navbar-brand">
<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="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1"
class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"
href="#">
Home
</a>
<a class="navbar-item"
href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-white">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
<!-- Info Background -->
<nav class="navbar is-info">
<div class="navbar-brand">
<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="navBackgroundDemo1">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div id="navBackgroundDemo1"
class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item"
href="#">
Home
</a>
<a class="navbar-item"
href="#">
Courses
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="field is-grouped">
<p class="control">
<button class="button is-primary">
Algorithms
</button>
</p>
<p class="control">
<button class="button is-white">
Data Structures
</button>
</p>
</div>
</div>
</div>
</div>
</nav>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/components/navbar/#colors