Alertas

Son un elemento simple que se puede utilizar cuando se necesite resaltar o aclarar una cuestión que haya quedado poco clara en el texto añadiendo información, enlaces o recomendaciones útiles para el usuario.
Desde la versión 4.0.0 se añadieron alias que permiten nombrar las clases de las alertas en el lenguaje inglés.

Primer Tipo de Alertas

La biblioteca cuenta con dos tipos de alertas, la primera utiliza un borde de color del lado izquierdo que es la que utilizaremos en este apartado.

Esta es la alerta roja para resaltar un texto determinado.
Esta es la alerta azul para resaltar un texto determinado.
Esta es la alerta gris para resaltar un texto determinado.
Esta es la alerta verde para resaltar un texto determinado.
Esta es la alerta negra para resaltar un texto determinado. 
    

            

                Esta es la alerta roja para resaltar un texto determinado.
            

            

                Esta es la alerta azul para resaltar un texto determinado.
            

            

                Esta es la alerta gris para resaltar un texto determinado.
            

            

                Esta es la alerta verde para resaltar un texto determinado.
            

            

                Esta es la alerta negra para resaltar un texto determinado.

Segundo Tipo de Alerta

El segundo tipo de alerta posee una opacidad menor para permitir cierto nivel de transparencia.

Esta es una alerta rojo del tipo dos.
Esta es una alerta azul del tipo dos.
Esta es una alerta verde del tipo dos.
Esta es una alerta negra del tipo dos.
Esta es una alerta gris del tipo dos.
Esta es una alerta blanca del tipo dos. 
            

                

                    Esta es una alerta rojo del tipo dos.
                

                

                    Esta es una alerta azul del tipo dos.
                

                

                    Esta es una alerta verde del tipo dos.
                

                

                    Esta es una alerta negra del tipo dos.
                

                

                    Esta es una alerta gris del tipo dos.
                

                

                    Esta es una alerta blanca del tipo dos.
Las clases utilizadas para definir este tipo de alerta son alert-op-[color] donde color puede ser:
  • red / roja
  • green / verde
  • black / negra
  • grey / gris
  • white / blanca
  • blue / azul

Alias desde la V4.0.0

Español Inglés Tipo
alerta-roja alert-red 1
alerta-azul alert-blue 1
alerta-verde alert-green 1
alerta-blanca alert-white 1
alerta-negra alert-black 1
alerta-gris alert-grey 1
alerta-op-roja alert-op-red 2
alerta-op-verde alert-op-green 2
alerta-op-azul alert-op-blue 2
alerta-op-negra alert-op-black 2
alerta-op-blanca alert-op-white 2
alerta-op-gris alert-op-grey 2

Alerta Personalizada

Ahora vamos a utilizar clases de otros apartados para aprovecharlas para generar alertas personalizadas, de esta manera se le muestra al lector que las posibilidades son muchas.

Esto es una alerta personalizada 1
Esto es una alerta personalizada 2
Esto es una alerta personalizada 3
Esto es una alerta personalizada 4
Esto es una alerta personalizada 5
Esto es una alerta personalizada 6
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, tenetur quo! Sequi veniam itaque similique. Quos, sapiente? Optio ut sunt modi recusandae! Quibusdam iusto veniam temporibus dolores nobis at officiis.
    
 Esto es una alerta personalizada 1

    
 Esto es una alerta personalizada 2

    
 Esto es una alerta personalizada 3

    
 Esto es una alerta personalizada 4

    
 Esto es una alerta personalizada 5

    
 Esto es una alerta personalizada 6

    
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, tenetur quo! Sequi veniam itaque similique. Quos, sapiente? Optio ut sunt modi recusandae! Quibusdam iusto veniam temporibus dolores nobis at officiis.
Todas las clases utilizadas pertenecen a otros apartados de la documentación:
  • Bordes
  • Padding
  • Colores
  • Texto

    • Cerrar Alerta

    Para poder cerrar la alerta debemos disponer del archivo con la lógica de la librería agregado al proyecto, luego con la clase .alert-close o .alerta-cerrar nos aparecerá X para desaparecer la alerta.

    Esta es la alerta rojo para resaltar un texto determinado.
    Esta es la alerta rojo para resaltar un texto determinado. 
            
    
            Esta es la alerta rojo para resaltar un texto determinado.
        
    

        
    
            Esta es la alerta rojo para resaltar un texto determinado.
    `r`n