Bootstrap-Basisanleitung

Bootstrap-Plugin

Bootstrap Alert Box Bootstrap Tooltip Plugin

Bootstrap-Popover-Plugin

Der Popover (Popover) ist ähnlich wie der Tool-Tipp (Tooltip) und bietet eine erweiterte Ansicht. Um den Popover zu aktivieren, muss der Benutzer nur den Cursor auf das Element setzen. Der Inhalt des Popovers kann vollständig mit dem Bootstrap-Daten-API (Bootstrap Data API) gefüllt werden. Dieses Verfahren hängt vom Tool-Tipp (Tooltip) ab.

wenn Sie die Funktionen des Plugins einzeln zitieren möchten, dann müssen Sie popover.js, das Tool-Tipp-Pluginerwähnt, können Sie Bootstrap-Plugin-Übersicht wie im Kapitel bootstrap.js oder die komprimierte Version bootstrap.min.js.

Verwendung

Das Popover-Plugin generiert Inhalte und Markierungen nach Bedarf und platziert den Popover (Popover) standardmäßig hinter den Auslöselementen. Sie können den Popover (Popover) auf zwei Arten hinzufügen:

Through data attributeTo add a Popover (Popover), just add an anchor to a/Button label addition data-toggle="popover" Just do it. The title of the anchor is the text of the Popover (Popover). By default, the plugin sets the Popover (Popover) at the top.
```
<a　href="#"　data-toggle="popover"　title="Example　popover">
　　　　Please hover over me
</a>
```
Through JavaScript:Enable Popover (Popover) through JavaScript:
```
$('#identifier').popover(options)
```

The Popover (Popover) plugin is not a pure CSS plugin like the dropdown menu and other plugins discussed earlier. To use this plugin, you must activate it with jQuery (read JavaScript). Use the following script to enable all popovers (popovers) on the page:

$(function　()　{　$("[data-$("[data-toggle='popover']").popover();　});

Online-Beispiel

The following example demonstrates how to use the Popover (Popover) plugin with the data attribute.

Online-Beispiel

Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Popover (Popover) 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="container"　style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-default"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="links"　
			data-content="Some content in the left Popover">
		linksiger Popover
	</button>
	<button type="button" class="btn btn-primary"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="top"　
			data-content="Some content in the top Popover">
		Oberer Popover
	</button>
	<button type="button" class="btn btn-success"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="bottom"　
			data-content="Some content in the bottom Popover">
		Unterer Popover
	</button>
	<button type="button" class="btn btn-warning"　title="Popover　title"　　
			data-container="body"　data-toggle="popover"　data-placement="right"　
			data-content="Some content in the right Popover">
		Rechter Popover
	</button>
</div>
<script>
$(function　()　{　
	$("[data-$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>

Test it out ‹/›

The results are as follows:

Options

Some options are added by Bootstrap data API (Bootstrap Data API) or called through JavaScript. The following table lists these options:

Option name	Type/Default value	Data attribute name	Beschreibung
animation	boolean Default value: true	data-animation	Apply CSS fade transition effect to the popup window.
html	boolean Standardwert: false	data-html	Fügen Sie HTML in das Pop-up-Fenster ein. Wenn false, wird jQuery's text-Methode verwendet, um Inhalte in das DOM einzufügen. Wenn Sie XSS-Angriffe befürchten, verwenden Sie text.
placement	string\|function Standardwert: top	data-placement	Bestimmen Sie, wie das Pop-up-Fenster positioniert wird (d.h. top\|bottom\|left\|right\|auto). Wenn auf auto wird dynamisch angepasst. Zum Beispiel, wenn placement auf "auto left" gesetzt ist, wird das Pop-up-Fenster so weit wie möglich auf der linken Seite angezeigt, und falls dies nicht möglich ist, auf der rechten Seite.
selector	string Standardwert: false	data-selector	Wenn ein Selector bereitgestellt wird, wird das Pop-up-Fensterobjekt an das angegebene Ziel delegiert.
title	string \| function Standardwert: ''	data-title	Wenn nicht angegeben title Wenn das Attribut title nicht angegeben ist, ist der Wert der Option title der Standardwert.
trigger	string Standardwert: 'hover focus'	data-trigger	Definieren Sie, wie das Pop-up-Fenster ausgelöst wird: click\| hover \| focus \| manual. Sie können mehrere Auslöser über Leerzeichen trennen übergeben.
delay	number \| object Standardwert: 0	data-delay	Millisekunden, die für das Verzögern des Anzeigen und Verbergens der Pop-up-Fenster verwendet werden - Nicht für den manuellen Auslösemodus 'manual' geeignet. Wenn eine Zahl bereitgestellt wird, wird die Verzögerung sowohl für das Anzeigen als auch für das Verbergen angewendet. Wenn ein Objekt bereitgestellt wird, hat es die folgende Struktur: delay: {　show:　500,　hide:　100　}
container	string \| false Standardwert: false	data-container	Fügen Sie Pop-up-Fensterrahmen zu einem bestimmten Element hinzu. Beispiel: container: 'body'

Methoden

Hier sind einige nützliche Methoden im Popover-Plugin:

Methoden	Beschreibung	Beispiel
Optionen: .popover(options)	Fügen Sie Pop-up-Fensterrahmenhandhabungen zu Elementkolektionen hinzu.	$().popover(options)
Toggle: .popover('toggle')	Den Anzeigestatus wechseln/Die Pop-up-Fensterrahmen des Elements verstecken.	$('#element').popover('toggle')
Show: .popover('show')	Den Pop-up-Fensterrahmen des Elements anzeigen.	$('#element').popover('show')
Hide: .popover('hide')	Die Pop-up-Fensterrahmen des Elements verstecken.	$('#element').popover('hide')
Destroy: .popover('destroy')	Versteckt und zerstört den Popover des Elements.	$('#element').popover('destroy')

Online-Beispiel

Nachfolgender Beispiel zeigt die Methoden des Popover-Plugins:

Online-Beispiel

Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Popover-Plugin Methoden/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="container"　style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-Standard Popover-show"　
			title="Popover-Titel" data-container="body"　
			data-toggle="popover"　data-placement="links"　
			data-content="linksiger Popover einiger Inhalte - show-Methode">
		linksiger Popover
	</button>
	<button type="button" class="btn btn-primärer Popover-hide"　
			title="Popover-Titel" data-container="body"　
			data-toggle="popover"　data-placement="top"　
			data-content="Einige Inhalte im oberen Popover - hide-Methode">
		Oberer Popover
	</button>
	<button type="button" class="btn btn-erfolgreich popover-destroy"　
			title="Popover-Titel" data-container="body"　
			data-toggle="popover"　data-placement="bottom"　
			data-content="Einige Inhalte im unteren Popover - destroy-Methode">
		Unterer Popover
	</button>
	<button type="button" class="btn btn-warnt popover-toggle"　
			title="Popover-Titel" data-container="body"　
			data-toggle="popover"　data-placement="right"　
			data-content="Einige Inhalte im rechten Popover - toggle-Methode">
		Rechter Popover
	</button"><br><br><br><br><br><br>
	<p　class="popover-options">
		<a　href="#"　type="button"　class="btn　btn-warning"　title="<h2>Titel</h2>"　　
		　　　data-container="body"　data-toggle="popover"　data-content="
																	　<h4>Einige Inhalte im Popover - options-Methode</h4>">
			Popover
		</a>
	</p>
	<script>
		$(function () { $('.popover-show').popover('show');});
		$(function () { $('.popover-hide').popover('hide');});
		$(function () { $('.popover-destroy').popover('destroy');});
		$(function () { $('.popover-toggle').popover('toggle');});
		$(function　()　{　$(".popover-options　a").popover({html　:　true　});});
	</script>
</div>
</body>
</html>

Test it out ‹/›

The results are as follows:

Ereignis

Nachfolgend wird eine Liste der Ereignisse aufgeführt, die im Popover-Plugin (Popover) verwendet werden. Diese Ereignisse können als Hooks in Funktionen verwendet werden.

Ereignis	Beschreibung	Beispiel
show.bs.popover	Dieses Ereignis wird sofort ausgelöst, wenn die show-Methode aufgerufen wird。	$('#mypopover').on('show.bs.popover', function () { 　　//　Führen Sie einige Aktionen aus... )
shown.bs.popover	Dieses Ereignis wird ausgelöst, wenn das Popover für den Benutzer sichtbar wird (während der CSS-Übergangseffekt abgeschlossen wird).	$('#mypopover').on('shown.bs.popover', function () { 　　//　Führen Sie einige Aktionen aus... )
hide.bs.popover	Dieses Ereignis wird sofort ausgelöst, wenn die hide-Methode aufgerufen wird.	$('#mypopover').on('hide.bs.popover', function () { 　　//　Führen Sie einige Aktionen aus... )
hidden.bs.popover	Dieses Ereignis wird ausgelöst, wenn das Popover für den Benutzer versteckt wird (während der CSS-Übergangseffekt abgeschlossen wird).	$('#mypopover').on('hidden.bs.popover', function () { 　　//　Führen Sie einige Aktionen aus... )

Online-Beispiel

Der folgende Beispiel zeigt die Ereignisse des Popover-Plugins (Popover-Pluginereignisse):

Online-Beispiel

Beispiel

!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">　
	<title>Bootstrap-Beispiel　-　Popover-Pluginereignisse</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 clas="container" style="padding:　100px　50px　10px;">
	<button type="button" class="btn btn-primärer Popover-show"　
			title="Popover-Titel" data-container="body"　
			data-toggle="popover"　
			data-content="linksiger Popover einiger Inhalte - show-Methode">
		linksiger Popover
	</button>
</div>
<script>
	$(function () { $('.popover-show').popover('show');});
	$(function () { $('.popover-show').on('shown.bs.popover', function () {
		alert("Warning message when displayed");
	})});
</script>
</body>
</html>

Test it out ‹/›

The results are as follows:

Bootstrap Alert Box Bootstrap Tooltip Plugin