Tamaños de mensajes 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. El componente Bulma Message se usa para proporcionar bloques de mensajes de colores para enfatizar parte de la página. Es un componente multiparte.

Partes del mensaje:

contenedor de mensajes
encabezado del mensaje
Cuerpo del mensaje

Los tamaños de mensajes de Bulma se utilizan para crear componentes de mensajes en diferentes tamaños. Puede agregar uno de los tres modificadores al componente de mensaje para crear mensajes de diferentes tamaños.

Clases de tamaño de mensaje de Bulma:

is-small: esta clase se utiliza para crear un componente de mensaje de tamaño pequeño. Esta clase se utiliza con la clase de mensaje.
is-medium: esta clase se utiliza para crear componentes de mensajes de tamaño mediano. Esta clase se utiliza con la clase de mensaje.
is-large: esta clase se utiliza para crear un componente de mensaje de gran tamaño. Esta clase se utiliza con la clase de mensaje.

Nota: Si no vamos a utilizar la clase de tamaño de mensaje, se creará el componente de mensaje de tamaño normal predeterminado.

Sintaxis:

<article class="message is-small">
  <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 Sizes</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 Message Sizes
                </h3>
  
                <article class="message is-small">
                    <div class="message-header">
                        <p>Web Technology (Small Size Message)</p>
  
                        <button class="delete" aria-label="delete">
                        </button>
                    </div>
                    <div class="message-body">
                        <strong>Web Technology</strong> refers
                        to the various tools and techniques
                        that are utilized in the process of
                        communication between different types
                        of devices over the internet.
                    </div>
                </article>
  
                <article class="message is-medium">
                    <div class="message-header">
                        <p>Web Technology (Medium Size Message)</p>
  
                        <button class="delete" aria-label="delete">
                        </button>
                    </div>
                    <div class="message-body">
                        <strong>Web Technology</strong> refers
                        to the various tools and techniques
                        that are utilized in the process of
                        communication between different types
                        of devices over the internet.
                    </div>
                </article>
  
                <article class="message is-large">
                    <div class="message-header">
                        <p>Web Technology (Large Size Message)</p>
  
                        <button class="delete" aria-label="delete">
                        </button>
                    </div>
                    <div class="message-body">
                        <strong>Web Technology</strong> refers
                        to the various tools and techniques
                        that are utilized in the process of
                        communication between different types
                        of devices over the internet.
                    </div>
                </article>
            </div>
        </div>
    </div>
</body>
  
</html>

Producción:

Bulma Message Sizes

Referencia: https://bulma.io/documentation/components/message/#sizes

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