Colores de notificación de Bulma

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.

Clase de colores de notificación de Bulma:

is-primary: esta clase se usa para establecer el color del elemento de notificación en cian claro.
is-dark: esta clase se utiliza para establecer el color del elemento de notificación en marrón oscuro.
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 Notification-Colors-Class">
  ...
</div>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Notification Colors</title>
  
    <!-- Include Bulma CSS -->
    <link rel='stylesheet'
          href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
  
    <!-- FontAwesome Library -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
</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 Colors
                </h3>
  
                <div class="notification is-primary">
                    <button class="delete"></button>
                    <strong>Primary Notification Color: </strong>
                    <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>
  
                <div class="notification is-dark">
                    <button class="delete"></button>
                    <strong>Dark Notification Color: </strong>
                    <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>
  
                <div class="notification is-link">
                    <button class="delete"></button>
                    <strong>Link Notification Color: </strong>
                    <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>
  
                <div class="notification is-info">
                    <button class="delete"></button>
                    <strong>Info Notification Color: </strong>
                    <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>
  
                <div class="notification is-success">
                    <button class="delete"></button>
                    <strong>Success Notification Color: </strong>
                    <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>
  
                <div class="notification is-warning">
                    <button class="delete"></button>
                    <strong>Warning Notification Color: </strong>
                    <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>
  
                <div class="notification is-danger">
                    <button class="delete"></button>
                    <strong>Danger Notification Color: </strong>
                    <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>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Bulma Notification Colors

Referencia: https://bulma.io/documentation/elements/notification/#colors

Publicación traducida automáticamente

Artículo escrito por vkash8574 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta