Modale in Bootstrap 5
Dieser Artikel ist über
- So erstellen Sie ein Modal in Bootstrap 5?
- Grundmodal
- Fügen Sie einem Modal Animation hinzu
- Modale Größen
- Zentriertes Modal
- Vollbildmodal
- Responsive Vollbildmodal
- Scrollenmodal
So erstellen Sie ein Modal
Um ein Modal zu erstellen, erstellen Sie zunächst eine DIV mit .modal Klasse zusammen mit seiner einzigartigen Ausweis Dann wickeln Sie diese DIV um eine DIV mit mit .Modal-Dialog Klasse in diesem Div erstellen eine andere DIV mit dem .Modal-Inhalt Klasse und im Inneren .Modal-Inhalt Div erstellen drei weitere Divs mit dem .Modal-Header, .Modal-Körper, .Modal-Footer Klassen.
.Modal-Header DIV enthält den Titel des Modals und seiner Entlassungstaste.
.Modal-Körper DIV enthält den Hauptinhalt aus dem Modal.
.Modal-Footer DIV enthält die Steuertasten des Modals.
Grundmodal
Um ein grundlegendes Modal zu erstellen, erstellen Sie eine DIV, die verwendet wird .modal Klasse mit einzigartigem Ausweis Danach wickeln Sie diese DIV um die Divs, die enthalten sind .Modal-Dialog, .Modal-Inhalt, .Modal-Header, .Modal-Körper Und .Modal-Footer Klassen wie im Beispiel gezeigt.
Kategorien hinzufügen
Dieses modale Beispiel dient zum Hinzufügen von Kategorien
Kategorien
So wird ein Basismodell erstellt.
Fügen Sie einem Modal Animation hinzu
Fügen Sie Ihrem modalen Gebrauch Animation hinzu .verblassen Klasse mit .modal Klasse:
…
So wird die Animation auf Modal angewendet.
Ohne Animation
Entferne das .verblassen Klasse, um das Modal ohne Animation zu öffnen.
…
So sieht ein Modal ohne Animation aus.
Modale Größen
Modale können drei Größen haben:
- Klein
- Groß
- Extra groß
Kleines Modal
Um ein kleines Modal zu erstellen, die .Modal-SM Klasse wird verwendet:
…
So wird ein kleines Modal erstellt.
Großer Modal
Um ein großes Modal zu erstellen, die .Modal-lg Klasse wird verwendet:
…
So wird ein großes Modal erstellt.
Extra großes Modal
Um ein extra großes Modal zu erstellen, die .Modal-XL Klasse wird verwendet:
…
So wird ein extra großer Modal erstellt.
Vollbildmodale
Wenn Sie möchten, dass Ihr Modal auf dem Vollbildmodus angezeigt wird, verwenden Sie .Modal-Fullscreen Klasse mit .Modal-Dialog Klasse.
…
So wird ein Vollbildmodal erstellt.
Responsive Vollbildmodale
Wir können auch steuern, wenn das Modal als Vollbildmodal angezeigt wird. Verwenden Sie die folgenden Klassen als Ihre Anforderung.
- .modal-vollschweren-sm-down Diese Klasse zeigt Vollbildmodal, wenn die Bildschirmgröße unter 576px liegt.
- .modal-vollschwerem MD-Down Diese Klasse zeigt Vollbildmodal, wenn die Bildschirmgröße unter 768px liegt.
- .Modal-Fullscreen-LG-Down Diese Klasse zeigt Vollbildmodal, wenn die Bildschirmgröße unter 992px liegt.
- .Modal-Fullscreen-Xl-Down Diese Klasse zeigt Vollbildmodal, wenn die Bildschirmgröße unter 1200px liegt.
- .Modal-Fullscreen-XXL-Down Diese Klasse zeigt Vollbildmodal, wenn die Bildschirmgröße unter 1400px liegt.
Zentriertes Modal
Verwenden .Modal-Dialog-zentriert Klasse mit .Modal-Dialog Um modal vertikal und horizontal in der Mitte der Seite zu zeigen.
…
Scrollenmodal
Eine Scrollbar wird automatisch einer Seite hinzugefügt, wenn der Inhalt in einem Modell groß ist.
Es ist also kein guter Ansatz, die gesamte Seite zu scrollen, anstatt das Modal nur zu scrollen, um dieses Problem zu lösen .modal-dialog-crollierbar mit dem .Modal-Dialog Klasse, um das Modal Scrollable zu machen
…
Ein scrollierbares Modal wird erfolgreich erstellt und funktioniert vollkommen in Ordnung.
Abschluss
Modal wird durch die Verwendung der verwendet .modal Klasse, der sich um andere Divs wickelt, die enthalten .Modal-Dialog, .Modal-Inhalt, .Modal-Header, .Modal-Körper, .Modal-Footer . Der obige Artikel beschreibt die Grundstruktur des Bootstrap 5 -Modals mit Kopfzeile, Körper und Fußzeile, die Aktionsschaltflächen für den Benutzer enthalten. Außerdem zeigt es verschiedene Modal -Typen wie Modalgrößen, Modale mit oder ohne Animation, zentrierte Modal und reaktionsschnelle Vollbildmodale.