Bootstrap4 Tutoriales básicos

Bootstrap4 alerta de información

Bootstrap 4 puede realizarse fácilmente una alerta de información.

El cuadro de alerta puede usar la clase .alert, seguido de .alert-éxito, .alert-información, .alert-advertencia, .alert-peligroso, .alert-primario, .alert-secundario, .alert-ligero o .alert-clase oscuro para implementar:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo de Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body
<div class="container">
　　<h2cuadro de alerta/h>2>
　　<p>El cuadro de alerta puede usar la clase .alert, seguido de una clase de color específico para implementar:/p>
　　<div class="alert alert-éxito">
　　　　<fuerte> ¡Éxito!/fuerte> Especificar información de confirmación de operación exitosa.
　　</div>
　　<div class="alert alert-información">
　　　　<fuerte> ¡Información!/fuerte> Tenga en cuenta esta información.
　　</div>
　　<div class="alert alert-advertencia">
　　　　<fuerte> ¡Advertencia!/fuerte> Establecer información de alerta.
　　</div>
　　<div class="alert alert-peligroso">
　　　　fuerte> Error!</operación fallida
　　</div>
　　<div class="alert alert-primario">
　　　　fuerte> Preferido!</fuerte>  Esto es una información de operación importante.
　　</div>
　　<div class="alert alert-secundario">
　　　　fuerte> Secundario!</fuerte>  Mostrar información no importante.
　　</div>
　　<div class="alert alert-oscuro">
　　　　<fuerte>Oscura!</fuerte>  Cuadro de aviso de tono oscuro.
　　</div>
　　<div class="alert alert-ligero">
　　　　<fuerte>Claro!</fuerte> Cuadro de aviso de tono claro.
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Agregar enlace en el cuadro de alerta

Agregar clase alert al etiqueta de enlace en el cuadro de alerta:-enlace de clase para establecer el color del cuadro de alerta:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo de Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body
<div class="container">
　　<h2Agregar enlace en el cuadro de alerta</h>2>
　　<p>Agregar clase alert al etiqueta de enlace en el cuadro de alerta:-enlace de clase para establecer el color del cuadro de alerta:</p>
　　<div class="alert alert-éxito">
　　　　<fuerte> ¡Éxito!/debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-información">
　　　　<fuerte> ¡Información!/debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-advertencia">
　　　　<fuerte> ¡Advertencia!/debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-peligroso">
　　　　fuerte> Error!</debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-primario">
　　　　fuerte> Preferido!</debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-secundario">
　　　　fuerte> Secundario!</debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-oscuro">
　　　　<fuerte>Oscura!</debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
　　<div class="alert alert-ligero">
　　　　¡Gris!/debe leer atentamente <a href="#" class="alert-link">esta información</a>.
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Cerrar la alerta

Podemos agregar .alert en el div de la alerta:-dismissible clase, luego agregar y data-dismiss="alert" clase para configurar la operación de cierre de la alerta.

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo de Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body
<div class="container">
　　<h2>Cerrar la alerta</h>2>
　　<p>Podemos agregar .alert en el div de la alerta:-clase dismissible, luego agregar class="close" y data-clase dismiss="alert" para configurar la operación de cierre de la alerta.</p>
　　<div class="alert alert-alerta de éxito-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte> ¡Éxito!/fuerte> Especificar información de confirmación de operación exitosa.
　　</div>
　　<div class="alert alert-alerta de información-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte> ¡Información!/fuerte> Tenga en cuenta esta información.
　　</div>
　　<div class="alert alert-alerta de advertencia-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte> ¡Advertencia!/fuerte> Establecer información de alerta.
　　</div>
　　<div class="alert alert-alerta de peligro-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　fuerte> Error!</fuerte>  Operación fallida.
　　</div>
　　<div class="alert alert-alerta primaria-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　fuerte> Preferido!</fuerte>  Esto es una información de operación importante.
　　</div>
　　<div class="alert alert-alerta secundaria-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　fuerte> Secundario!</fuerte>  Mostrar información no importante.
　　</div>
　　<div class="alert alert-alerta oscura-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte>Oscura!</fuerte>  Cuadro de aviso de tono oscuro.
　　</div>
　　<div class="alert alert-alerta ligera-clase dismissible">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte>Claro!</fuerte> Cuadro de aviso de tono claro.
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Aviso: × (×) es un carácter de entidad HTML, utilizado para representar la operación de cierre, en lugar de la letra "x".

Animación de la alerta

.fade y .show se utilizan para configurar el efecto de desvanecimiento y aparición de la alerta al cerrar:

ejemplo

<!DOCTYPE html>
<html>
<head>
　　<title> Ejemplo de Bootstrap</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, inicial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body
<div class="container">
　　<h2Animación de la alerta/h>2>
　　<p>.fade y .show se utilizan para configurar el efecto de desvanecimiento y aparición de la alerta al cerrar:/p>
　　<div class="alert alert-alerta de éxito-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte> ¡Éxito!/fuerte> Especificar información de confirmación de operación exitosa.
　　</div>
　　<div class="alert alert-alerta de información-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte> ¡Información!/fuerte> Tenga en cuenta esta información.
　　</div>
　　<div class="alert alert-alerta de advertencia-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte> ¡Advertencia!/fuerte> Establecer información de alerta.
　　</div>
　　<div class="alert alert-alerta de peligro-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　fuerte> Error!</fuerte>  Operación fallida.
　　</div>
　　<div class="alert alert-alerta primaria-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　fuerte> Preferido!</fuerte>  Esto es una información de operación importante.
　　</div>
　　<div class="alert alert-alerta secundaria-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　fuerte> Secundario!</fuerte>  Mostrar información no importante.
　　</div>
　　<div class="alert alert-alerta oscura-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte>Oscura!</fuerte>  Cuadro de aviso de tono oscuro.
　　</div>
　　<div class="alert alert-alerta ligera-disponible fade show">
　　　　<button type="button" class="close" data-descartar="alert">×</button>
　　　　<fuerte>Claro!</fuerte> Cuadro de aviso de tono claro.
　　</div>
</div>
</body>
</html>

Prueba aquí ‹/›

Bootstrap4 botón Bootstrap4 Jumbotron