Heim > Artikel > Web-Frontend > Erfahren Sie mehr über Popups in Bootstrap

Erfahren Sie mehr über Popups in Bootstrap

青灯夜游nach vorne: 2021-04-15 11:14:052060Durchsuche

Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Popup-Box in Bootstrap. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Oberflächlich betrachtet ist die Popup-Box eigentlich eine spezielle Eingabeaufforderungsbox mit nur einem zusätzlichen Titel. Aber tatsächlich gibt es Unterschiede.

Grundlegende Verwendung

Beim Erstellen eines Tooltips können Sie das Tag-Element

Die grundlegendste Verwendung ist also wie folgt: 1. Definieren Sie den Titel über den Wert des Titelattributs (Sie können den Titel auch mit dem benutzerdefinierten Attribut src-title festlegen ). Der Titel hat hohe Priorität

2. Legen Sie den Dateninhalt fest Attributparameter

Im Pop-up-Feld erstellen Wenn , können Sie die in der Tabelle unten aufgeführten benutzerdefinierten Attribute in HTML definieren

[Hinweis] Die Datenpallette wird standardmäßig rechts statt oben angezeigt

Erfahren Sie mehr über Popups in Bootstrap

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

JS-Trigger

popover Die Verwendung von JS ist die gleiche wie die von Tooltip. Es unterstützt die Verwendung der Optionsobjektmethode, um Parameter an die popover()-Methode zu übergeben.

<button>点我弹出/隐藏弹出框</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

Die Parameter in den Optionen Zu den Objekten gehören Animation, HTML, Platzierung, Selektor, Originaltitel, Titel, Auslöser, Verzögerung, Container, Vorlage. Details: Hierher verschieben Sie können auch die Schlüsselwörter „Anzeigen“, „Ausblenden“, „Umschalten“ und „Zerstören“ verwenden

Vergleichen Sie die Eingabeaufforderungsbox

Erfahren Sie mehr über Popups in Bootstrap

1. Die standardmäßigen auslösenden Ereignisse der Eingabeaufforderungsbox sind „Hover“ und „Fokus“. Das Popup-Box-Popover ist „Klicken“

2 Die QuickInfo der Eingabeaufforderungsbox hat nur einen Inhalt (Titel). , und das Popup-Feld kann nicht nur den Titel (Titel), sondern auch den Inhalt (Inhalt) festlegen

3 Der Tooltip des Eingabeaufforderungsfelds wird standardmäßig oben angezeigt und das Popup-Feld-Popover wird angezeigt standardmäßig auf der rechten Seite

4. Verschiedene Anzeigevorlagen

Die Vorlage des Prompt-Box-Tooltips:

<body   style="max-width:90%">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="标题" data-content="上侧" >上侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="标题" data-content="下侧" >下侧</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="无动画" data-animation="false" >无动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="有动画" >有动画</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="hover触发" data-trigger="hover">hover触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="click触发" data-trigger="click">click触发</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="不延迟">不延迟</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="标题" data-content="延迟500ms" data-delay="500">延迟500ms</button>
<script>
$(function(){
    $(&#39;[data-toggle="popover"]&#39;).popover();

});    
</script>

Die Vorlage des Popup-Box-Popovers:

$(element).popover(options);

Weitere Programmierkenntnisse finden Sie unter:

Programmierung Unterrichten Erfahren Sie mehr über Popups in Bootstrap ! !

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über Popups in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Detaillierte Erläuterung des Informationsaufforderungsfelds in BootstrapNächster Artikel：Detaillierte Erläuterung des Informationsaufforderungsfelds in Bootstrap

In Verbindung stehende Artikel

Mehr sehen