In diesem Artikel wird beschrieben, wie das Bootstrap-Modal gestaltet wird.
Wie gestalte ich das Bootstrap-Modal?
Führen Sie die folgenden Schritte aus, um zu erfahren, wie Sie das Bootstrap-Modal gestalten.
Schritt 1: Erstellen Sie eine HTML-Datei
Erstellen Sie zunächst ein Modal, indem Sie die folgenden Anweisungen befolgen:
- Ein ... kreieren ' „Container und ihm eine Klasse zuweisen“ Hauptmodalcontainer “.
- Fügen Sie dann eine Schaltfläche hinzu, die das modale Fenster auslöst. Weisen Sie ihm das „ btn “, „ btn-primär ', Und ' zeigen-modal ' Klassen. Setzen Sie die Datenattribute „ Datenumschaltung „mit dem Wert“ modal ' und das ' Datenziel ' mit dem ' #myModal ' Wert. Diese ID zeigt auf die ID des modalen Fensters.
- Erstellen Sie als Nächstes das modale Fenster. Fügen Sie dazu ein „
„Element und weise es zu“ modal ' Und ' verblassen ” Klassen und legen Sie die ID fest.- Füge hinzu ein '
“ für das Dialogfenster des Modals und weisen Sie ihm das „ modaler Dialog ' Klasse.- Geben Sie dann den Inhalt des Modals in einem „
“ an und weisen Sie ihm die Klasse „ modaler Inhalt “.- Erstellen Sie einen Schließen-Button mit der Klasse „ schließen “. Der ' Daten-Schließung ”-Attribut wird verwendet, um das modale Fenster zu schließen.
- Geben Sie dann den Modalkörper mit den Klassen „ Modalkörper ' Und ' Reihe “. Nehmen Sie darin eine Spalte mit 6 Gittern für das Bild und 6 für den Inhalt.
- Das Bild wird mit dem „
' Schild. - Dann innerhalb des „
”-Element mit dem “ Inhalt ”-Klasse, fügen Sie Titel, Untertitel und Beschreibung hinzu.- Platzieren Sie danach einen Button mit dem Bootstrap „ btn “, „ btn-Gefahr ', Und ' p-2 ' Klassen:
< div Klasse = 'Hauptmodalcontainer' >
< Taste Klasse = 'btn btn-primary show-modal' Datenumschaltung = 'modal' Daten- Ziel = '#myModal' > modal ansehen < / Taste >
< div Klasse = 'modales Fade' Ausweis = 'myModal' >
< div Klasse = 'modal-dialog' >
< div Klasse = 'modaler Inhalt' >
< Taste Klasse = 'schließen' Daten-Schließung = 'modal' >
< Spanne > × < / Spanne >< / Taste >
< div Klasse = 'modal-body row' >
< div Klasse = 'col-sm-6 modal-image' >< Bild Quelle = '/img/kleidung.jpg' >< / div >
< div Klasse = 'Inhalt col-sm-6' >
< h3 Klasse = 'Titel' > Sonderangebot < / h3 >
< Spanne Klasse = 'Untertitel' > 20 % Rabatt zum Mitnehmen und Lieferung < / Spanne >
< P Klasse = 'Beschreibung' > Hemden in bester Qualität. Jede Größe ist verfügbar. Leicht waschbar. < / P >
< Taste Klasse = 'btn btn-Gefahr p-2' > MEHR SEHEN < / Taste >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Schritt 2: Gestalten Sie die „Hauptmodalcontainer“-Klasse
Der gesamte Container ist mit dem CSS „ Schriftfamilie ' Eigentum:
.main-modal-container {
Schriftfamilie : 'Poppins' , serifenlos ;
}Schritt 3: Stil „show-modal“ Klasse
Der ' zeigen-modal ”-Klasse wird mit den folgenden Eigenschaften deklariert:
.main-modal-container .show-modal {
Farbe : #F f f ;
Hintergrundfarbe : #3a97c9 ;
Text-Transformation : profitieren ;
Polsterung : 10px 15px ;
Rand : 80px Auto 0 ;
Anzeige : Block ;
}Hier:
- „ Farbe “ legt die Schriftfarbe fest.
- „ Hintergrundfarbe “ legt die Hintergrundfarbe des Elements fest.
- „ Text-Transformation “ schreibt den Text groß.
- „ Polsterung ” passt den Abstand um den Inhalt des Elements an.
- „ Rand “ erzeugt Raum um das Element herum.
- „ Anzeige „mit dem Wert“ Block “ setzt die Breite des Elements auf 100 %.
Schritt 4: Style „modal-dialog“-Klasse auf Fade
.modal .verblassen .modal-dialog {
verwandeln : Skala ( 0 ) ;
Übergang : alle 450ms Kubik-Bezier ( .47 , 1.64 , .41 , .8 ) ;
}Wenn das Modal ausgeblendet wird, werden die folgenden CSS-Eigenschaften auf „ modaler Dialog ' Klasse:
- „ verwandeln ” Eigentum mit dem “ Skala() ”-Wert erhöht oder verringert die Größe des Elements vertikal oder horizontal.
- „ Übergang “ verschiebt das Element schrittweise. Der ' Kubikbezier() ”-Funktion wendet die kubische Bezierkurve an. Sie wird durch vier Punkte bestimmt.
Schritt 5: Gestalten Sie die „modal-dialog“-Klasse in Show
.modal .zeigen .modal-dialog {
verwandeln : Skala ( 1 ) ;
}Das CSS „ verwandeln „Eigenschaft mit dem Wert“ Skala(1) ” vergrößert das Dialogfeld.
Schritt 6: Gestalten Sie die „modal-content“-Klasse
.main-modal-container .modal-dialog .modal-Inhalt {
Grenzradius : 30px ;
Grenze : keiner ;
Überlauf : versteckt ;
}Der ' modaler Inhalt “ ist mit folgenden Eigenschaften ausgestattet:
- „ Grenzradius ” rundet die Kanten des Elements ab.
- „ Grenze „mit dem Wert“ keiner “ verbirgt die Grenze.
- „ Überlauf “ steuert den Inhaltsfluss.
Schritt 7: Klasse „Schließen“ gestalten
.main-modal-container .modal-dialog .modal-Inhalt .schließen {
Farbe : #747474 ;
Hintergrundfarbe : RGB ( 255 , 255 , 255 , 0,5 ) ;
Höhe : 27px ;
Breite : 27px ;
Polsterung : 0 ;
Opazität : 1 ;
Überlauf : versteckt ;
Position : absolut ;
Rechts : 15px ;
Spitze : 15px ;
z-index : 2 ;
}Hier:
- „ Opazität “ definiert die Transparenzstufe des Elements.
- „ Position „mit dem Wert“ absolut “ legt die Position des Elements relativ zu seiner übergeordneten Position fest.
- „ Rechts ' Und ' Spitze ” Platz rechts und oben neben der Schließen-Schaltfläche setzen.
- „ z-index “ gibt die Stapelreihenfolge des Elements an. Die größere Stapelreihenfolge bringt das Element nach vorne.
Schritt 8: Klasse „Modal-Body“ stylen
.main-modal-container .modal-dialog .modal-Inhalt .modal-body {
Polsterung : 0 !wichtig ;
}Der Abstand um den gesamten Modalkörper wird per CSS angepasst. Polsterung ' Eigentum. Außerdem ist die „ !wichtig Das Schlüsselwort ” wird verwendet, um die Wichtigkeit des Elements festzulegen.
Schritt 9: Gestalten Sie das „img“-Element
.main-modal-container .modal-dialog .modal-Inhalt .modal-body .modal-image Bild {
Höhe : 100% ;
Breite : 100% ;
}Schritt 10: Gestalten Sie die „Inhalt“-Klasse
.main-modal-container .modal-dialog .modal-Inhalt .modal-body .Inhalt {
Polsterung : 35px 30px ;
}Durch die Verwendung des „ Polsterung ”-Eigenschaft wird das Leerzeichen um die “ Inhalt ” Inhalt der Klasse.
Schritt 11: Klasse „Titel“ gestalten
.main-modal-container .modal-dialog .modal-Inhalt .modal-body .Titel {
Farbe : #fb3640 ;
Schriftfamilie : 'Sacramento' , kursiv ;
Schriftgröße : 35px ;
}Hier:
- „ Schriftfamilie “ definiert den Stil der Schrift.
- „ Schriftgröße “ legt die Schriftgröße fest.
Schritt 12: Klasse „Untertitel“ gestalten
.main-modal-container .modal-dialog .modal-Inhalt .modal-body .Untertitel {
Schriftstärke : 600 ;
Text-Transformation : Großbuchstaben ;
Rand : 0 0 20px ;
Anzeige : Block ;
}Gemäß dem angegebenen Code-Snippet:
- „ Schriftstärke “ legt die Dicke der Schrift fest.
- „ Text-Transformation ” legt die Groß-/Kleinschreibung fest.
Ausgang
So können Sie das Bootstrap-Modal gestalten.
Abschluss
Um das Bootstrap-Modalfenster zu gestalten, fügen Sie zuerst die Schaltfläche hinzu, die das Modal auslöst. Erstellen Sie dann das modale Fenster mit HTML-Elementen. Fügen Sie danach mehrere CSS-Eigenschaften hinzu, darunter „ Polsterung “, „ Rand “, „ Farbe “, „ Übergang “ und viele mehr, um das modale Fenster zu gestalten. Genauer gesagt die „ Kubik-Bezier ”-Funktion wird verwendet, um den Übergangseffekt in einer Vier-Punkte-Kurve auf das modale Fenster anzuwenden. In diesem Beitrag wurde das Verfahren zum Stylen des Bootstrap-Modals erläutert.