29.4. fejezet: Figyelmeztetések (Alerts)
A Bootstrap számos lehetőséget nyújt a különféle figyelmeztetések használatára. Ezek ugyanazok a színek, amik összefüggésben voltak a tartalommal. Minta:
És a fenti lap kódja: (cssbootstrap15.html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Alerts</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Figyelmeztetések (Alerts)</h2>
<p>Figyelmeztetéseket létre lehet hozni a .alert osztállyal a következő minták szerint:</p>
<div class="alert alert-success">
<strong>Success</strong> Pozitív, vagy sikeres figyelmeztetés.
</div>
<div class="alert alert-info">
<strong>Info</strong> Semleges információ vagy akció.
</div>
<div class="alert alert-warning">
<strong>Warning</strong> Olyan figyelmeztetés, amely valamilyen reakciót igényel.
</div>
<div class="alert alert-danger">
<strong>Danger</strong> Veszélyes vagy alapvetően negatív akció.
</div>
<div class="alert alert-primary">
<strong>Primary</strong> Fontos figyelmeztetés.
</div>
<div class="alert alert-secondary">
<strong>Secondary</strong> Kevésbé fontos interakció.
</div>
<div class="alert alert-dark">
<strong>Dark</strong> Sötétszürke figyelmeztetés.
</div>
<div class="alert alert-light">
<strong>Light</strong> Világosszürke figyelmeztetés.
</div>
</div>
</body>
</html>
Kicsit látványosabbá tehetőek az egyes sorok, ha az .alert-link osztályt használjuk a linkek kiemelésére. Minta:
<div class="alert alert-success">
<strong>Success</strong> Pozitív vagy sikeres
<a href="#" class="alert-link">figyelmeztetés</a>.
</div>
A normál ablakoknál megszokott jobb felső sarokban lévő „x” szimbólum is létrehozható, mint az egyes elemek becsukó indikátora. Osztály pontos neve: .alert-dismissible.
Minta:
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-dismiss="alert"> ×</button>
<strong>Success</strong> Pozitív vagy sikeres figyelmeztetés.
</div>
Halványító hatást lehet elérni a .fade és .show osztályok használatával. Minta:
<div class="alert alert-danger alert-dismissible fade show">
További lehetőségek találhatók az alábbi címen:
https://www.w3schools.com/bootstrap4/bootstrap_alerts.asp
Az összes variáns teljes leírása itt található:
https://www.w3schools.com/bootstrap4/bootstrap_ref_js_alert.asp