-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path06-Alerts.html
47 lines (40 loc) · 3.13 KB
/
06-Alerts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!doctype html>
<html lang="en">
<head>
<title>Alerts</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body class="p-5">
<div class="alert alert-danger" role="alert">
Lorem ipsum dolor sit amet consectetur adipisicing elit. In quae consequatur porro a doloremque molestias? Reiciendis, architecto at! Odit, dolores, magni tempore fuga assumenda modi cum soluta cumque fugiat repellendus voluptatibus, aspernatur dolor non quia iusto nisi perferendis quae libero.
</div>
<div class="alert alert warning" role="alert">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas totam ea dolores delectus ratione accusantium quaerat magnam ab quibusdam. Aut odit facilis, obcaecati nihil ad facere distinctio fugit quia impedit dolore dolorum error? Aliquid, reiciendis alias nulla animi corporis eaque.
</div>
<p>alert con link</p>
<div class="alert alert-success" role="alert">
Lorem ipsum dolor sit amet consectetur adipisicing elit.<a></a>Ut vitae eius, repudiandae atque explicabo aut natus ea, non praesentium incidunt amet, accusantium facilis illo possimus earum! Labore voluptate aspernatur animi, tempore corrupti blanditiis voluptas quae quia! Sequi officiis odit dolorum.
</div>
<p>alert con contenido adicional</p>
<div class="alert alert-danger">
<h4 class="alert-heading">Alto</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto consectetur minima nesciunt mollitia. Eos, similique, reiciendis dolorem consectetur magni amet eveniet officia, omnis eius harum suscipit ab sapiente veritatis labore.</p>
<hr>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Distinctio, quam?</p>
</div>
<p>alert con botón cerrar</p>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<p><a href="" class="alert-link">Hola</a> Soy una alerta que puedes cerrar</p>
<button class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>