Heim > Web-Frontend > Bootstrap-Tutorial > So verwenden Sie die modale Bootstrap-Box

So verwenden Sie die modale Bootstrap-Box

coldplay.xixi
Freigeben: 2023-01-13 00:22:21
Original
3825 Leute haben es durchsucht

So verwenden Sie die modale Bootstrap-Box: Importieren Sie zuerst die Datei und wenden Sie den modalen Bootstrap-Stil auf den Body-Bereich an. Platzieren Sie dann den Inhaltsbereich im modalen Stil-Div und legen Sie den Stil des Inhaltsbereichs auf [modal-content] fest.

So verwenden Sie die modale Bootstrap-Box

Die Betriebsumgebung dieses Artikels: Windows 7-System, Bootstrapv4.4.1-Version, Dell G3-Computer.

Empfohlen: Bootstrap-Video-Tutorial

So verwenden Sie die modale Bootstrap-Box:

1. Importieren Sie zunächst die erforderlichen Bibliotheksdateien in HTML, wie im Bild unten gezeigt. Achten Sie darauf, die JQuery-Datei zu importieren

So verwenden Sie die modale Bootstrap-Box

2. Dann haben wir den Bootstrap-Modal-Stil auf den Body-Bereich angewendet, wie in der Abbildung unten gezeigt ist modaler Inhalt, wie im Bild gezeigt

So verwenden Sie die modale Bootstrap-Box

4 Dann werfen wir einen Blick auf die drei Stile des Inhaltsbereichs, den Kopf und den Schwanz sowie den Mittelteil, wie im Bild unten gezeigt

So verwenden Sie die modale Bootstrap-Box

5. Als nächstes definieren wir eine Schaltfläche. Ein Feld wird angezeigt, wie im Bild unten gezeigt. 6. Stellen Sie sicher, dass Sie das Datenzielattribut der Schaltfläche angeben im Bild unten

So verwenden Sie die modale Bootstrap-Box

7 Nachdem wir das Programm ausgeführt haben, sehen Sie das Bild unten. Der Inhalt ist unsere modale Box

So verwenden Sie die modale Bootstrap-Box

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die modale Bootstrap-Box. 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