Bootstrap4 Grundlehrbuch

Bootstrap4 Schaltfläche Bootstrap4 Jumbotron

Bootstrap4 Infobalkon-Hinweisbox

Bootstrap 4 Eine Infobalkon-Hinweisbox kann leicht implementiert werden.

Die Hinweisbox kann die Klasse .alert verwenden, gefolgt von .alert, um dies einfach zu erreichen.-erfolgreich, .alert-info, .alert-warnton, .alert-gefährlich, .alert-primär, .alert-sekundär, .alert-leicht oder .alert-dunkel-Klasse, um zu erreichen:

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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">
　　<h2Hinweisbox/h2>
　　Die Hinweisbox kann die Klasse .alert verwenden, gefolgt von einer spezifischen Farbklasse, um bestimmte Bedeutungen zu erreichen:/p>
　　<div　class="alert　alert-erfolgreich
　　　　<strong>Erfolg!/<strong>Legen Sie die Erfolgsmeldung für die angegebene Operation fest.
　　</div>
　　<div　class="alert　alert-info
　　　　<strong>Information!/<strong>Bitte beachten Sie diese Information.
　　</div>
　　<div　class="alert　alert-warnton
　　　　<strong>Warnung!/<strong>Legen Sie die Warnmeldung fest.
　　</div>
　　<div　class="alert　alert-gefährlich
　　　　strong> Fehler!</Fehlgeschlagene Operation
　　</div>
　　<div　class="alert　alert-primär
　　　　strong> Vorrangiges!</strong>　Dies ist eine wichtige Operationsinformation.
　　</div>
　　<div　class="alert　alert-sekundär
　　　　strong> Sekundär!</strong>　Zeige einige unwichtige Informationen.
　　</div>
　　<div　class="alert　alert-dunkel
　　　　<strong> Dunkelgrau!</strong>　Dunkelgraue Hinweisbox.
　　</div>
　　<div　class="alert　alert-leicht
　　　　<strong> Hellgrau!</strong> Hellgraue Hinweisbox.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Hinweisbox hinzufügen

Fügen Sie auf den Link-Tag in der Hinweisbox die Klasse <alert> hinzu:-Verwenden Sie die <link>-Klasse, um Links zu setzen, die die Farbe der Hinweisbox angeben:

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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">
　　<h2Hinweisbox hinzufügen/h2>
　　Fügen Sie auf den Link-Tag in der Hinweisbox die Klasse <alert> hinzu:-Verwenden Sie die <link>-Klasse, um Links zu setzen, die die Farbe der Hinweisbox angeben:/p>
　　<div　class="alert　alert-erfolgreich
　　　　<strong>Erfolg!/Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-info
　　　　<strong>Information!/Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-warnton
　　　　<strong>Warnung!/Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-gefährlich
　　　　strong> Fehler!</Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-primär
　　　　strong> Vorrangiges!</Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-sekundär
　　　　strong> Sekundär!</Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-dunkel
　　　　<strong> Dunkelgrau!</Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
　　<div　class="alert　alert-leicht
　　　　Grau!/Sie sollten sorgfältig lesen-link">Diese Information</a>.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Schließen Sie die Hinweismeldung

Wir können die .alert-dismissible Klasse hinzufügen und dann die class="close" und data-dismiss="alert" Klasse hinzufügen, um den Schließvorgang der Hinweismeldung zu setzen.

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>Schließen Sie die Hinweismeldung</h2>
　　<p>Wir können die .alert-dismissible-Klasse und fügen Sie dann die class="close" und data-dismiss="alert"-Klasse, um den Schließvorgang der Hinweismeldung zu setzen.</p>
　　<div　class="alert　alert-Erfolg - Warnung-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Erfolg!/<strong>Legen Sie die Erfolgsmeldung für die angegebene Operation fest.
　　</div>
　　<div　class="alert　alert-Info - Warnung-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Information!/<strong>Bitte beachten Sie diese Information.
　　</div>
　　<div　class="alert　alert-Warnung - Warnung-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Warnung!/<strong>Legen Sie die Warnmeldung fest.
　　</div>
　　<div　class="alert　alert-Gefahr - Warnung-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong> Fehler!</strong>　Fehlgeschlagene Operation.
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong> Vorrangiges!</strong>　Dies ist eine wichtige Operationsinformation.
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong> Sekundär!</strong>　Zeige einige unwichtige Informationen.
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong> Dunkelgrau!</strong>　Dunkelgraue Hinweisbox.
　　</div>
　　<div　class="alert　alert-light　alert-dismissible">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong> Hellgrau!</strong> Hellgraue Hinweisbox.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Hinweis: × (×) ist ein HTML-Entity-Zeichen, um den Schließvorgang anzuzeigen, nicht den Buchstaben "x".

Hinweismeldung Animation

.fade und .show-Klassen werden verwendet, um den Ausblenden- und Einfaden-Effekt der Hinweismeldung beim Schließen zu setzen:

Beispiel

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap Beispiel</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-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>Hinweismeldung Animation</h2>
　　<p>.fade und .show-Klassen werden verwendet, um den Ausblenden- und Einfaden-Effekt der Hinweismeldung beim Schließen zu setzen:</p>
　　<div　class="alert　alert-Erfolg - Warnung-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Erfolg!/<strong>Legen Sie die Erfolgsmeldung für die angegebene Operation fest.
　　</div>
　　<div　class="alert　alert-Info - Warnung-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Information!/<strong>Bitte beachten Sie diese Information.
　　</div>
　　<div　class="alert　alert-Warnung - Warnung-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong>Warnung!/<strong>Legen Sie die Warnmeldung fest.
　　</div>
　　<div　class="alert　alert-Gefahr - Warnung-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong> Fehler!</strong>　Fehlgeschlagene Operation.
　　</div>
　　<div　class="alert　alert-primary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong> Vorrangiges!</strong>　Dies ist eine wichtige Operationsinformation.
　　</div>
　　<div　class="alert　alert-secondary　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　strong> Sekundär!</strong>　Zeige einige unwichtige Informationen.
　　</div>
　　<div　class="alert　alert-dark　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong> Dunkelgrau!</strong>　Dunkelgraue Hinweisbox.
　　</div>
　　<div　class="alert　alert-light　alert-dismissible　fade　show">
　　　　<button　type="button"　class="close"　data-dismiss="alert">×</button>
　　　　<strong> Hellgrau!</strong> Hellgraue Hinweisbox.
　　</div>
</div>
</body>
</html>

Testen Sie es heraus ‹/›

Bootstrap4 Schaltfläche Bootstrap4 Jumbotron