Bulma es un framework CSS basado en flexbox . Hace que sea más fácil y rápido crear sitios web utilizando sus componentes prediseñados. En este artículo, veremos los diversos colores con los que se puede diseñar el componente del panel en Bulma.
Clases de color del panel:
- is-primary: Esta clase se usa para cambiar el color del panel al color primario.
- is-link: Esta clase se utiliza para cambiar el color del panel al color del enlace.
- is-info: esta clase se usa para cambiar el color del panel al color de información.
- is-success: Esta clase se usa para cambiar el color del panel al color de éxito.
- is-warning: Esta clase se usa para cambiar el color del panel al color de advertencia.
- is-danger: Esta clase se usa para cambiar el color del panel al color de peligro.
- is-black: Esta clase se utiliza para cambiar el color del panel al color negro.
- is-dark: Esta clase se usa para cambiar el color del panel a un color oscuro.
- is-light: Esta clase se usa para cambiar el color del panel a un color claro.
- is-white: Esta clase se utiliza para cambiar el color del panel al color blanco.
Sintaxis:
<nav class="panel is-primary">
...
</nav>
Ejemplo: El siguiente ejemplo muestra cómo cambiar el color del panel utilizando las clases enumeradas anteriormente.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Bulma Panel Colors
</title>
<link rel='stylesheet' href=
'https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css'>
<style>
.container {
display: flex;
align-items: center;
flex-direction: column;
}
.panel {
max-width: 400px;
margin-top: 25px;
}
</style>
</head>
<body class="has-text-centered">
<h1 class="is-size-2 has-text-success">
GeeksforGeeks
</h1>
<b class="is-size-4">
Bulma Panel Colors
</b>
<div class="container">
<!-- Primary Color -->
<nav class="panel is-primary">
<p class="panel-heading">
Primary Color Panel
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Data Structures</a>
<a>Algorithms</a>
<a>DBMS</a>
<a>C++</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
How to generate triangle pattern in C++?
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
Tree Data Structure
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
What is a foreign key in SQL?
</a>
</nav>
<!-- Link Color -->
<nav class="panel is-link">
<p class="panel-heading">
Link Color Panel
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Data Structures</a>
<a>Algorithms</a>
<a>DBMS</a>
<a>C++</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
How to generate triangle pattern in C++?
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
Tree Data Structure
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
What is a foreign key in SQL?
</a>
</nav>
<!-- Danger Color -->
<nav class="panel is-danger">
<p class="panel-heading">
Danger Color Panel
</p>
<p class="panel-tabs">
<a class="is-active">All</a>
<a>Data Structures</a>
<a>Algorithms</a>
<a>DBMS</a>
<a>C++</a>
</p>
<a class="panel-block is-active">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
How to generate triangle pattern in C++?
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true">
</i>
</span>
Tree Data Structure
</a>
<a class="panel-block">
<span class="panel-icon">
<i class="fas fa-book"
aria-hidden="true"></i>
</span>
What is a foreign key in SQL?
</a>
</nav>
</div>
</body>
</html>
Producción:
Referencia: https://bulma.io/documentation/components/panel/#colors