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.
La notificación es un simple bloque de color que llama la atención del usuario sobre algo. Se puede usar como una notificación anclada en la esquina de la ventana gráfica. Admite el uso del elemento de eliminación.
La función de color de luz de notificación de Bulma se usa para agregar las versiones de color claro al elemento de notificación.
Clase de color de la luz de notificación de Bulma:
- is-primary: esta clase se usa para establecer el color del elemento de notificación en cian claro.
- is-link: esta clase se utiliza para establecer el color del elemento de notificación en azul.
- is-info: esta clase se utiliza para establecer el color del elemento de notificación en azul claro.
- is-success: esta clase se utiliza para establecer el color del elemento de notificación en verde.
- is-warning: esta clase se utiliza para establecer el color del elemento de notificación en amarillo.
- is-danger: esta clase se utiliza para establecer el color del elemento de notificación en rojo.
Sintaxis:
<div class="notification is-primary is-light"> <button class="delete"></button> <!-- Notification content --> </div>
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>Bulma Notification Light colors</title> <!-- Include Bulma CSS --> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.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 Notification Light colors </h3> <div class="notification is-primary is-light"> <button class="delete"></button> <strong>Primary Light Notification Color: '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> <div class="notification is-link is-light"> <button class="delete"></button> <strong>Link Light Notification Color: '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> <div class="notification is-info is-light"> <button class="delete"></button> <strong>Info Light Notification Color: '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> <div class="notification is-success is-light"> <button class="delete"></button> <strong>Success Light Notification Color: '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> <div class="notification is-warning is-light"> <button class="delete"></button> <strong>Warning Light Notification Color: '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> <div class="notification is-danger is-light"> <button class="delete"></button> <strong>Danger Light Notification Color: '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> </div> </div> </div> </body> </html>
Producción:
Referencia: https://bulma.io/documentation/elements/notification/#light-colors