Bootstrap Grundlagen-Tutorial

Bootstrap Erweiterung

Bootstrap 警告

Dieses Kapitel erläutert Warnung(Alerts) und die von Bootstrap bereitgestellten Klassen für Warnungen. Warnung(Alerts) bietet den Benutzern eine Möglichkeit, die Stile von Nachrichten zu definieren. Sie bieten kontextuelle Informationen zur Rückmeldung typischer Benutzeraktionen.

Sie können einer Warnungsfeld eine optionale Schließtaste hinzufügen. Um ein inline löschbares Warnungsfeld zu erstellen, verwenden Sie Warnung(Alerts) jQuery Erweiterung。

Sie können eine <div> erstellen und einer hinzufügen .alert class und vier Kontextklassen (d.h. .alert-success、.alert-info、.alert-warning、.alert-danger）之一，以添加一个基本的警告框。下面的示例演示了这一点：

Online-Beispiel

Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
　　　　<title>Bootstrap-Beispiel　-　Warnung(Alerts)</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-success">Erfolg! Die Übermittlung wurde erfolgreich abgeschlossen.</div>
<div　class="alert　alert-info">Information! Beachten Sie diese Information.</div>
<div　class="alert　alert-warning">Warnung! Bitte senden Sie nicht ab.</div>
<div　class="alert　alert-danger">Fehler! Bitte führen Sie einige Änderungen durch.</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Kann abgebrochen werden (Abbruch-Warnungen)

Die Schritte zum Erstellen einer abbrechbaren Warnung (Abbruch-Warnung) sind wie folgt:

Durch Erstellen eines <div> und Hinzufügen eines .alert class und vier Kontextklassen (d.h. .alert-success、.alert-info、.alert-warning、.alert-danger）, um eine grundlegende Warnbox hinzuzufügen.
Fügen Sie optional die <div> class oben hinzu .alert-dismissable。
Fügen Sie einen Schließknopf hinzu.

Der folgende Beispiel zeigt dies:

Online-Beispiel

Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Kann abgebrochen werden (Abbruch-Warnungen)</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-success　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Erfolg! Die Übermittlung wurde erfolgreich abgeschlossen.
</div>
<div　class="alert　alert-info　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Information! Beachten Sie diese Information.
</div>
<div　class="alert　alert-warning　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Warnung! Bitte senden Sie nicht ab.
</div>
<div　class="alert　alert-danger　alert-dismissable">
	<button　type="button"　class="close"　data-dismiss="alert"
			aria-hidden="true">
		×
	</button>
	Fehler! Bitte führen Sie einige Änderungen durch.
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Verknüpfung in Warnungen (Alerts)

Die Schritte zum Erstellen eines Links in Warnungen (Alerts) sind wie folgt:

Durch Erstellen eines <div> und Hinzufügen eines .alert class und vier Kontextklassen (d.h. .alert-success、.alert-info、.alert-warning、.alert-danger）, um eine grundlegende Warnbox hinzuzufügen.
Verwenden .alert-link Klassen, um schnell Links mit zugehörigen Farben bereitzustellen.

Online-Beispiel

Beispiel

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Verknüpfung in Warnungen (Alerts)</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-success">
	<a　href="#"　class="alert-link">Erfolg! Die Übermittlung wurde erfolgreich abgeschlossen.</a>
</div>
<div　class="alert　alert-info">
	<a　href="#"　class="alert-link">信息！请注意这个信息。</a>
</div>
<div　class="alert　alert-warning">
	<a　href="#"　class="alert-link">警告！请不要提交。</a>
</div>
<div　class="alert　alert-danger">
	<a　href="#"　class="alert-link">错误！请进行一些更改。</a>
</div>
</body>
</html>

测试看看 ‹/›

结果如下所示：

Bootstrap 进度条 Bootstrap 缩略图