Erfahren Sie mehr über Popups in Bootstrap-Bootstrap-Tutorial-php.cn

Erfahren Sie mehr über Popups in Bootstrap

青灯夜游

Freigeben： 2021-04-16 08:49:30

nach vorne

2066 Leute haben es durchsucht

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.

Erfahren Sie mehr über Popups in Bootstrap

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();

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Die Vorlage des Popup-Box-Popovers:

$(element).popover(options);

Nach dem Login kopieren

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!