Cet article décrira comment styliser le modal Bootstrap.
Comment styliser le modal Bootstrap ?
Pour apprendre à styliser le modal Bootstrap, suivez les étapes ci-dessous.
Étape 1 : créer un fichier HTML
Tout d'abord, créez un modal en suivant les instructions ci-dessous :
- Créer un ' « conteneur et attribuez-lui une classe » conteneur-modal principal ”.
- Ensuite, ajoutez un bouton qui déclenchera la fenêtre modale. Attribuez-lui le ' btn ”, “ btn-primaire ', et ' show-modal ' Des classes. Définissez les attributs de données ' bascule de données ' avec la valeur ' modal ' et le ' cible de données ' avec le ' #monModal ' valeur. Cet identifiant pointe vers l'identifiant de la fenêtre modale.
- Ensuite, créez la fenêtre modale. Pour ce faire, ajoutez un '
' élément et attribuez-le ' modal ' et ' disparaître ” classes, et définissez l'id.- Ajouter un '
' pour la boîte de dialogue du modal et attribuez-lui le ' dialogue modal ' classe.- Ensuite, spécifiez le contenu du modal dans un '
' et attribuez-lui la classe ' contenu modal ”.- Faire un bouton de fermeture avec la classe ' fermer ”. Le ' data-dismiss ” L'attribut est utilisé pour fermer la fenêtre modale.
- Ensuite, spécifiez le corps modal avec les classes ' corps modal ' et ' ligne ”. A l'intérieur, prenez une colonne de 6 grilles pour l'image et 6 pour le contenu.
- L'image est intégrée à l'aide du '
' étiqueter. - Puis, à l'intérieur du '
” élément avec le “ contenu ” classe, ajoutez le titre, le sous-titre et la description.- Après cela, placez un bouton avec le Bootstrap ' btn ”, “ btn-danger ', et ' p-2 ' Des classes:
< div classe = 'conteneur modal principal' >
< bouton classe = 'btn btn-primary show-modal' bascule de données = 'modal' données- cible = '#monModal' > vue modale < / bouton >
< div classe = 'fondu modal' identifiant = 'monModal' >
< div classe = 'dialogue-modal' >
< div classe = 'contenu modal' >
< bouton classe = 'fermer' data-dismiss = 'modal' >
< portée > × < / portée >< / bouton >
< div classe = 'ligne de corps modal' >
< div classe = 'image-modale col-sm-6' >< image src = '/img/vetements.jpg' >< / div >
< div classe = 'contenu col-sm-6' >
< h3 classe = 'titre' > Offre spéciale < / h3 >
< portée classe = 'Sous-titre' > 20% de réduction sur les plats à emporter et la livraison < / portée >
< p classe = 'description' > Chemises de la meilleure qualité. Chaque taille est disponible. Facilement lavable. < / p >
< bouton classe = 'btn btn-danger p-2' > VOIR PLUS < / bouton >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Étape 2 : styler la classe « main-modal-container »
L'ensemble du conteneur est stylé avec le CSS ' famille de polices ' propriété:
.main-modal-container {
famille de polices : 'Poppins' , sans-serif ;
}Étape 3 : Style de classe « show-modal »
Le ' show-modal ” la classe est déclarée avec les propriétés suivantes :
.main-modal-container .show-modal {
couleur : #fff ;
Couleur de l'arrière plan : #3a97c9 ;
transformation de texte : capitaliser ;
rembourrage : 10px 15px ;
marge : 80px auto 0 ;
afficher : bloc ;
}Ici:
- ' couleur ” définit la couleur de la police.
- ' Couleur de l'arrière plan ” définit la couleur d'arrière-plan de l'élément.
- ' transformation de texte ” met le texte en majuscule.
- ' rembourrage ” ajuste l'espace autour du contenu de l'élément.
- ' marge » produit de l'espace autour de l'élément.
- ' afficher ' avec la valeur ' bloc ' définit la largeur de l'élément à 100 %.
Étape 4 : styler la classe « modal-dialog » sur Fade
.modal .disparaître .modal-dialog {
transformer : escalader ( 0 ) ;
transition : tous 450ms cube-bézier ( .47 , 1,64 , .41 , .8 ) ;
}Lorsque le modal s'estompe, les propriétés CSS suivantes sont appliquées au ' dialogue modal ' classe:
- ' transformer ' propriété avec le ' escalader() ” augmente ou diminue la taille de l'élément verticalement ou horizontalement.
- ' transition » déplace progressivement l'élément. Le ' cube-bézier() ” La fonction applique la courbe de Bézier cubique. Il est déterminé par quatre points.
Étape 5 : stylisez la classe 'modal-dialog' sur Show
.modal .montrer .modal-dialog {
transformer : escalader ( 1 ) ;
}Le SSC ' transformer « propriété avec la valeur » échelle(1) ” augmente la taille de la boîte de dialogue.
Étape 6 : styler la classe « modal-content »
.main-modal-container .modal-dialog .modal-content {
rayon de bordure : 30px ;
frontière : aucun ;
débordement : caché ;
}Le ' contenu modal » est agrémenté des propriétés suivantes :
- ' rayon de bordure ' arrondit les bords de l'élément.
- ' frontière ' avec la valeur ' aucun » cache la frontière.
- ' débordement ” contrôle le flux du contenu.
Étape 7 : style 'fermer' la classe
.main-modal-container .modal-dialog .modal-content .fermer {
couleur : #747474 ;
Couleur de l'arrière plan : RVB ( 255 , 255 , 255 , 0,5 ) ;
hauteur : 27px ;
largeur : 27px ;
rembourrage : 0 ;
opacité : 1 ;
débordement : caché ;
position : absolu ;
droite : 15px ;
haut : 15px ;
indice z : 2 ;
}Ici:
- ' opacité ” définit le niveau de transparence de l'élément.
- ' position ' avec la valeur ' absolu ' définit la position de l'élément par rapport à sa position parent.
- ' droite ' et ' haut ” définir l'espace à droite et en haut du bouton de fermeture.
- ' indice z ” spécifie l'ordre de pile de l'élément. Le plus grand ordre de pile amène l'élément au premier plan.
Étape 8 : Classe de style « modal-body »
.main-modal-container .modal-dialog .modal-content .modal-body {
rembourrage : 0 !important ;
}L'espace autour de l'ensemble du corps modal est ajusté par CSS ' rembourrage ' propriété. De plus, le « !important ' Le mot-clé est utilisé pour définir l'importance de l'élément.
Étape 9 : Style de l'élément 'img'
.main-modal-container .modal-dialog .modal-content .modal-body .modal-image image {
hauteur : 100% ;
largeur : 100% ;
}Étape 10 : stylisez la classe 'contenu'
.main-modal-container .modal-dialog .modal-content .modal-body .contenu {
rembourrage : 35px 30px ;
}En utilisant le ' rembourrage ' propriété, l'espace est ajouté autour de la ' contenu ” le contenu de la classe.
Étape 11 : Classe de style « titre »
.main-modal-container .modal-dialog .modal-content .modal-body .titre {
couleur : #fb3640 ;
famille de polices : 'Sacramento' , cursive ;
taille de police : 35px ;
}Ici:
- ' famille de polices ” définit le style de la police.
- ' taille de police ” définit la taille de la police.
Étape 12 : Classe de style « sous-titre »
.main-modal-container .modal-dialog .modal-content .modal-body .Sous-titre {
poids de la police : 600 ;
transformation de texte : majuscule ;
marge : 0 0 20px ;
afficher : bloc ;
}Selon l'extrait de code donné :
- ' poids de la police ' définit l'épaisseur de la police.
- ' transformation de texte ” définit la casse de la police.
Sortir
C'est ainsi que vous pouvez styliser le modal Bootstrap.
Conclusion
Pour styliser la fenêtre modale Bootstrap, ajoutez d'abord le bouton qui déclenchera le modal. Ensuite, créez la fenêtre modale en utilisant des éléments HTML. Après cela, ajoutez plusieurs propriétés CSS, y compris ' rembourrage ”, “ marge ”, “ couleur ”, “ transition ', et bien d'autres pour styliser la fenêtre modale. Plus précisément, le « cube-bézier ” est utilisée pour appliquer l'effet de transition dans une courbe à quatre points sur la fenêtre modale. Cet article a expliqué la procédure pour styliser le modal Bootstrap.