Bootstrap 4 - Estilos para Alerts II

Bootstrap 4 - Estilos para Alerts II

En el capítulo anterior vimos algunas formas de sacar partido a los alerts de Bootstrap 4. En este veremos unos cuantos más para concluir el tema de los alerts.

Enlaces en los alerts de Bootstrap 4

En este ejemplo, tienes unos alert iguales que los que vimos en el capítulo anterior (primary, secondary, success, danger...).
Con la clase alert-link podemos crear enlaces con un estilo de texto en negrita y subrayado al pasar el cursor encima de él.

<div class="alert alert-primary">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-secondary">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-success">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>

<div class="alert alert-danger">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-warning">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-info">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-light">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div>
 
<div class="alert alert-dark">
  Puedes poner un alert con un enlace a cualquier lugar. <a href="https://thehittoslab.blogspot.com" target="_blank" class="alert-link"> Este es un enlace...</a> Si le pasas por encima el cursor hace un efecto de subrayado.
</div> 

Resultado

Alerts con botón para cerrar

Para concluir por el momento el tema de los alerts, os dejo el alert con un botón de cierre. Con este alert podemos mostrar un aviso de cookies o cualquier otra cosa que se te ocurra.
Al cerrar el alert, este desaparece. Solo volverá a aparecer si se recarga la página.

<div class="alert alert-danger alert-dismissible fade show">
 
   <u>Este texto está subrayado. </u>
 <i> Este texto está en cursiva</i>
 <b>Este texto está en negrita</b>
 
 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
  
     <span aria-hidden="true">&times;</span>
  
   </button>
 
</div>

Resultado

Curso desde cero de JavaScript Capítulo 9 - El condicional if - else

Curso desde cero de JavaScript Capítulo 9 - El condicional if - else

El condicional if

El condicional if necesita que se le especifique una condición, si esta es verdadera (true), se ejecuta el código de su interior, si es falsa (false) no se ejecuta nada.

Opcionalmente tenemos la opción de añadirle un else con el que especificar un código a ejecutar en caso de que la condición sea false.

    <script>
  
        var edad;
    
      edad = prompt ("Introduce tu edad");
     
      if(edad>=18){
   
             alert ("Bienvenido/a, puedes entrar.");
 }
   
 else{
      
      alert ("No puedes entrar, solo tienes: " + edad + " años.");
 }

    </script>

Resultado
Lo primero que aparece al ejecutarse el script es esta ventana prompt, en la cuál debes introducir una edad. Esta ventana, tal y como expliqué en un capítulo anterior, recoge datos introducidos por el usuario en una variable.

Si introduces una edad inferior a 18 años:

Aparece el mensaje del else:

En cambio, si introduzco una edad de 18 o más años, se ejecuta el mensaje del if.

En el siguiente capítulo vamos a ver el condicional if else con else if, con el que podrás evaluar todas las condiciones que quieras, no solo dos.

Curso desde cero de JavaScript Capítulo 5 - El método prompt()

Curso desde cero de JavaScript Capítulo 5 - El método prompt()

La finalidad del método prompt() es mostrar mensajes como los alert(). Además, prompt() a parte de mostrar un mensaje, deja un espacio para que el usuario introduzca información, por lo que nos encontramos con un método de salida y entrada de datos.

Vamos a ver un ejemplo práctico:

Ejemplo práctico de prompt en JavaScript

<script>
  
     var nombreUsuario;
    
     nombreUsuario = prompt ("Introduce un nombre de usuario");
     
     alert ("Bienvenido/a: " + nombreUsuario);

</script>

Resultado

Primero me aparece la ventana del prompt(). Me pide un nombre de usuario:

Le introduzco el nombre de usuario:

Me saluda el alert() con un saludo personalizado extraído de la variable nombreUsuario.