Heim > Web-Frontend > Bootstrap-Tutorial > Wozu dient Popover im Bootstrap?

Wozu dient Popover im Bootstrap?

WBOY
Freigeben: 2021-12-29 15:55:57
Original
2813 Leute haben es durchsucht

In Bootstrap wird das Popover-Plugin verwendet, um ein Popup-Feld mit bestimmten Inhalten und Tags zu generieren. Sie können das Datenattribut und JavaScript verwenden, um ein Popup-Feld hinzuzufügen. popover"" und "$(element).popover(" bzw. Optionen)".

Wozu dient Popover im Bootstrap?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Bootstrap-Version 3.3.7, DELL G3-Computer

Was ist die Verwendung von Popover in Bootstrap?

Popover ähnelt Tooltip Provides eine erweiterte Ansicht. Um das Popover zu aktivieren, bewegen Benutzer einfach den Mauszeiger über das Element. Der Inhalt der Popup-Box kann mithilfe der Bootstrap Data API vollständig gefüllt werden. Diese Methode basiert auf Tooltips.

Popover-Plug-ins generieren Inhalte und Markups bei Bedarf. Popovers werden standardmäßig hinter ihren auslösenden Elementen platziert. Sie können ein Popover auf zwei Arten hinzufügen:

Über das Datenattribut: Um ein Popover hinzuzufügen, fügen Sie einfach data-toggle="popover" zu einem Anker-/Schaltflächen-Tag hinzu. Der Titel des Ankers ist der Text des Popovers. Standardmäßig platziert das Plugin das Popover oben.

Ein Beispiel ist wie folgt:

<a href="#" data-toggle="popover" title="Example popover">    请悬停在我的上面</a>
Nach dem Login kopieren

Über JavaScript: Popover über JavaScript aktivieren:

Ein Beispiel ist wie folgt:

$(&#39;#identifier&#39;).popover(options)
Nach dem Login kopieren

Das Popover-Plugin ist kein reines Popup wie die Dropdown-Menüs und andere Plugins, die zuvor besprochen wurden. Um das Plugin nutzen zu können, müssen Sie es mit jquery (Javascript lesen) aktivieren. Verwenden Sie das folgende Skript, um alle Popovers auf der Seite zu aktivieren:

$(function () { $("[data-toggle=&#39;popover&#39;]").popover(); });
Nach dem Login kopieren

Empfohlenes Lernen: „Tutorial zur Bootstrap-Nutzung

Das obige ist der detaillierte Inhalt vonWozu dient Popover im Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage