Bulma es un marco CSS gratuito y de código abierto basado en Flexbox. Es rico en componentes, compatible y está bien documentado. Es de naturaleza altamente receptiva. Utiliza clases para implementar su diseño.
El componente Bulma Message se utiliza para proporcionar bloques de mensajes de colores para enfatizar parte de la página. Es un componente multiparte.
Contiene principalmente tres partes que son:
- contenedor de mensajes
- encabezado del mensaje
- Cuerpo del mensaje
La función de color del mensaje de Bulma se usa para agregar los diferentes colores al componente del mensaje. Las clases utilizadas para las características de color se dan a continuación:
- is-dark: esta clase solía establecer el color del contenedor del mensaje en marrón oscuro.
- is-primary: esta clase se usa para establecer el color del contenedor de mensajes en cian claro.
- is-link: esta clase se utiliza para establecer el color del contenedor de mensajes en azul.
- is-info: esta clase se utiliza para establecer el color del contenedor de mensajes en azul claro.
- is-success: esta clase se utiliza para establecer el color del contenedor de mensajes en verde.
- is-warning: esta clase se utiliza para establecer el color del contenedor de mensajes en amarillo.
- is-danger: esta clase se utiliza para establecer el color del contenedor del mensaje en rojo.
Sintaxis:
<article class="message is-dark">
<div class="message-header">
<!-- Message header content -->
</div>
<div class="message-body">
<!-- Message body content -->
</div>
</article>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Message Colors</title> <!-- Include Bulma CSS --> <link rel='stylesheet' href= 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'> </head> <body> <div class='content container has-text-justified'> <div class='columns is-mobile is-centered'> <div class='column is-8'> <h1 class="has-text-success has-text-centered">GeeksforGeeks </h1> <h3 class="has-text-centered"> Bulma Message Colors </h3> <article class="message is-dark"> <div class="message-header"> <p>GeeksforGeeks - Dark Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> <article class="message is-primary"> <div class="message-header"> <p>GeeksforGeeks - Primary Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> <article class="message is-link"> <div class="message-header"> <p>GeeksforGeeks - Link Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> <article class="message is-info"> <div class="message-header"> <p>GeeksforGeeks - Info Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> <article class="message is-success"> <div class="message-header"> <p>GeeksforGeeks - Success Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> <article class="message is-warning"> <div class="message-header"> <p>GeeksforGeeks - Warning Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> <article class="message is-danger"> <div class="message-header"> <p>GeeksforGeeks - Danger Message Color</p> <button class="delete" aria-label="delete"> </button> </div> <div class="message-body"> <strong>'GeeksforGeeks'</strong> is a computer science portal.it was created with a goal in mind to provide well written, well thought and well explained solutions for selected questions. The core team of five super geeks constituting of technology lovers and computer science enthusiasts have been constantly working in this direction. </div> </article> </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/components/message/#colors