English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Bootstrap Grundtutorials

Bootstrap Plugin

Bootstrap Warnungsbox (Alert) Plugin

Warnungsbox (Alert) Nachrichten werden hauptsächlich verwendet, um Informationen wie Warnungen oder Bestätigungen an den Endbenutzer anzuzeigen. Mit dem Warnungsbox (Alert) Plugin können Sie der Nachricht aller Warnungsboxen die abbrechbare (dismiss) Funktion hinzufügen.

Verwendung

Es gibt zwei Möglichkeiten, die abbrechbare (dismissal) Funktion der Warnungsbox zu aktivieren:

  • Durch die data-EigenschaftDurch das Daten-API (Data API) hinzufügen, um abbrechbar zu machen, ist es ausreichend, den Schließungsknopf hinzuzufügen data-dismiss="alert"Dadurch wird automatisch die Schließungsfunktion der Warnungsbox hinzugefügt.

    <a data-dismiss="alert" href="#" aria-hidden="true">
　　　　×
</>

  • Durch JavaScriptDurch JavaScript hinzufügen, um abbrechbar zu machen:

    $(".alert").alert()

Online-Beispiel

Nachfolgender Beispiel zeigt die Verwendung des Warnungsbox (Alert) Plugins über die data-Eigenschaft.

Online-Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Warnungsbox (Alert) Plugin/title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="alert alert-warning">
	<a href="#" class="close" data-dismiss="alert">
		×
	</>
	<strong>Warnung!</strong>/<strong>Es gibt ein Problem mit Ihrer Netzwerkverbindung.</strong>
</div>
</body>
</html>
Test and see ‹/›

The results are as follows:

Optionen

Keine Optionen.

Methode

Nachfolgend einige nützliche Methoden des Warnungsbox (Alert) Plugins:

MethodeBeschreibungBeispiel
.alert()Diese Methode ermöglicht es, dass alle Warnungsboxen über die Schließungsfunktion verfügen.
$('#identifier').alert();
Schließungsmethode .alert('close')Öffne alle Warnungsboxen.
$('#identifier').alert('close');

Um Animationseffekte beim Schließen zu aktivieren, stellen Sie sicher, dass .fade und .in class.

Online-Beispiel

Nachfolgender Beispiel zeigt: .alert() Verwendung der Methode:

Online-Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　>Warnungsbox (Alert) Plugin – alert() Methode</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Warnungsbox (Alert) Plugin – alert() Methode</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　Erfolg!/Das Ergebnis ist erfolgreich.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　<strong>Warnung!</strong>/<strong>Es gibt ein Problem mit Ihrer Netzwerkverbindung.</strong>
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert();
　　　　　　　　$("#myAlert2").alert();
　　　　});
});
</script>
</body>
</html>
Test and see ‹/›

Nachfolgender Beispiel zeigt: .alert('close') Verwendung der Methode:

Online-Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Bootstrap-Beispiel　-　>Warnungsbox (Alert) Plugin – alert('close') Methode</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Warnungsbox (Alert) Plugin – alert('close') Methode</h2>
<div id="myAlert" class="alert alert-success">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　Erfolg!/Das Ergebnis ist erfolgreich.
</div>
<div id="myAlert2" class="alert alert-warning">
　　　　<a href="#" class="close" data-dismiss="alert">×</>
　　　　<strong>Warnung!</strong>/<strong>Es gibt ein Problem mit Ihrer Netzwerkverbindung.</strong>
</div>
　
<script>
$(function() {
　　　　$(".close").click(function(){
　　　　　　　　$("#myAlert").alert('close');
　　　　　　　　$("#myAlert2").alert('close');
　　　　});
});
</script>
</body>
</html>
Test and see ‹/›

Sie können sehen, dass alle Warnfenster die Schließfunktion haben, d.h. das Schließen eines beliebigen Warnfensters führt auch zum Schließen der verbleibenden Warnfenster.

Ereignis

Die folgende Tabelle listet die Ereignisse auf, die im Warnfenster-(Alert)-Plugin verwendet werden. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

EreignisBeschreibungBeispiel
close.bs.alertWenn aufgerufen close Dieses Ereignis wird sofort ausgelöst, wenn ein Beispielmethoden aufgerufen wird.
$('#myalert').bind('close.bs.alert', function () {
　　//　Führen Sie einige Aktionen aus...
)
closed.bs.alertDieses Ereignis wird ausgelöst, wenn das Warnfenster geschlossen wird (warten auf Abschluss der CSS-Übergangseffekte).
$('#myalert').bind('closed.bs.alert', function () {
　　　　//　Führen Sie einige Aktionen aus...
)

Online-Beispiel

Die folgenden Beispiele zeigen die Ereignisse des Warnfenster-(Alert)-Plugins:

Online-Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Warnfenster-(Alert)-Plugin-Ereignisse</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myAlert" class="alert alert-success">
	<a href="#" class="close" data-dismiss="alert">×</>
	Erfolg!/Das Ergebnis ist erfolgreich.
</div>
<script type="text/javascript">
$(function() {
	$("#myAlert").bind('closed.bs.alert', function () {
		alert("Warning message box has been closed.");
	});
});
</script>　　
</body>
</html>
Test and see ‹/›

The results are as follows:

Bootstrap Button PluginBootstrap Popover Plugin