Denne artikel vil beskrive, hvordan Bootstrap-modalen skal styles.
Hvordan styles Bootstrap modal?
Følg nedenstående trin for at lære at style Bootstrap-modalen.
Trin 1: Opret en HTML-fil
Først skal du oprette en modal ved at følge instruktionerne nedenfor:
- Lave en ' ' container og tildel den en klasse ' hovedmodal-container ”.
- Tilføj derefter en knap, der vil udløse det modale vindue. Tildel den ' btn ', ' btn-primær ', og ' show-modal ” klasser. Indstil dataattributterne ' dataskift ' med værdien ' modal ' og ' data-mål ' med ' #myModal 'værdi. Dette id peger på id'et for det modale vindue.
- Opret derefter det modale vindue. For at gøre det skal du tilføje et '
' element og tildel det ' modal ' og ' falme ” klasser, og indstil id.- Tilføj en '
' for dialogboksen for modalen og tildel den ' modal-dialog ' klasse.- Angiv derefter modalens indhold i en '
' og tildel den klassen ' modalt indhold '.- Lav en lukkeknap med klassen ' tæt ”. Det ' data-afvis ”-attributten bruges til at lukke det modale vindue.
- Angiv derefter den modale krop med klasserne ' modal-krop ' og ' række ”. Indeni den skal du tage en kolonne med 6 gitter for billedet og 6 for indholdet.
- Billedet er indlejret ved hjælp af '
” tag.
- Derefter inde i '
' element med ' indhold ” klasse, tilføj titel, undertitel og beskrivelse.- Placer derefter en knap med Bootstrap ' btn ', ' btn-fare ', og ' p-2 ' klasser:
< div klasse = 'main-modal-container' >
< knap klasse = 'btn btn-primær show-modal' dataskift = 'modal' data- mål = '#myModal' > se modal < / knap >
< div klasse = 'modal fade' id = 'myModal' >
< div klasse = 'modal-dialog' >
< div klasse = 'modalt indhold' >
< knap klasse = 'tæt' data-afvis = 'modal' >
< span > × < / span >< / knap >
< div klasse = 'modal-body row' >
< div klasse = 'col-sm-6 modal-image' >< img src = '/img/tøj.jpg' >< / div >
< div klasse = 'indhold col-sm-6' >
< h3 klasse = 'titel' > Special tilbud < / h3 >
< span klasse = 'undertekst' > 20% rabat på afhentning og levering < / span >
< s klasse = 'beskrivelse' > skjorter i bedste kvalitet. Hver størrelse er tilgængelig. Let vaskbar. < / s >
< knap klasse = 'btn btn-fare p-2' > SE MERE < / knap >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Trin 2: Stil 'main-modal-container' klasse
Hele beholderen er stylet med CSS ' skrifttype-familie ” ejendom:
.main-modal-container {
skrifttype-familie : 'Poppins' , sans serif ;
}Trin 3: Stil 'show-modal' klasse
Det ' show-modal Klasse er erklæret med følgende egenskaber:
.main-modal-container .show-modal {
farve : #fff ;
baggrundsfarve : #3a97c9 ;
tekst-transformation : kapitalisere ;
polstring : 10px 15 px ;
margen : 80 px auto 0 ;
Skærm : blok ;
}Her:
- “ farve ” indstiller skriftfarven.
- “ baggrundsfarve ' indstiller elementets baggrundsfarve.
- “ tekst-transformation ” skriver teksten med stort.
- “ polstring ” justerer plads omkring elementets indhold.
- “ margen ” producerer plads omkring elementet.
- “ Skærm ' med værdien ' blok ” indstiller elementets bredde til 100 %.
Trin 4: Stil 'modal-dialog' klasse på fade
.modal .falme .modal-dialog {
transformere : vægt ( 0 ) ;
overgang : alle 450 ms kubik-bezier ( .47 , 1,64 , .41 , .8 ) ;
}Når modalen falmer, anvendes følgende CSS-egenskaber på ' modal-dialog ' klasse:
- “ transformere ' ejendom med ' vægt() ” værdi øger eller mindsker elementets størrelse lodret eller vandret.
- “ overgang ” flytter gradvist elementet. Det ' cubic-bezier() ”-funktionen anvender den kubiske bezier-kurve. Det bestemmes af fire punkter.
Trin 5: Stil 'modal-dialog' klasse på udstilling
.modal .at vise .modal-dialog {
transformere : vægt ( 1 ) ;
}CSS ' transformere ' ejendom med værdien ' skala(1) ” øger størrelsen af dialogboksen.
Trin 6: Style 'modal-content' klasse
.main-modal-container .modal-dialog .modal-indhold {
grænse-radius : 30 px ;
grænse : ingen ;
flyde over : skjult ;
}Det ' modalt indhold ” er indrettet med følgende egenskaber:
- “ grænse-radius ” runder elementets kanter.
- “ grænse ' med værdien ' ingen ” skjuler grænsen.
- “ flyde over ” styrer indholdets flow.
Trin 7: Stil 'tæt' klasse
.main-modal-container .modal-dialog .modal-indhold .tæt {
farve : #747474 ;
baggrundsfarve : rgba ( 255 , 255 , 255 , 0,5 ) ;
højde : 27px ;
bredde : 27px ;
polstring : 0 ;
Gennemsigtighed : 1 ;
flyde over : skjult ;
position : absolut ;
højre : 15 px ;
top : 15 px ;
z-indeks : 2 ;
}Her:
- “ Gennemsigtighed ” definerer elementets gennemsigtighedsniveau.
- “ position ' med værdien ' absolut ” indstiller elementets position i forhold til dets overordnede position.
- “ højre ' og ' top ” sæt plads til højre og øverst på lukkeknappen.
- “ z-indeks ” angiver elementets stakrækkefølge. Den større stakrækkefølge bringer elementet frem.
Trin 8: Style 'modal-body' klasse
.main-modal-container .modal-dialog .modal-indhold .modal-body {
polstring : 0 !vigtig ;
}Pladsen rundt om hele modale krop justeres af CSS ' polstring ” ejendom. Desuden er ' !vigtig ” nøgleordet bruges til at angive elementets betydning.
Trin 9: Stil 'img' Element
.main-modal-container .modal-dialog .modal-indhold .modal-body .modal-image img {
højde : 100 % ;
bredde : 100 % ;
}Trin 10: Style 'indholdsklassen'.
.main-modal-container .modal-dialog .modal-indhold .modal-body .indhold {
polstring : 35 px 30 px ;
}Ved at bruge ' polstring ' ejendom, tilføjes pladsen omkring ' indhold ' klasses indhold.
Trin 11: Style 'titel' klasse
.main-modal-container .modal-dialog .modal-indhold .modal-body .titel {
farve : #fb3640 ;
skrifttype-familie : 'Sacramento' , kursiv ;
skriftstørrelse : 35 px ;
}Her:
- “ skrifttype-familie ' definerer skrifttypens stil.
- “ skriftstørrelse ” indstiller skrifttypens størrelse.
Trin 12: Style 'undertekst' klasse
.main-modal-container .modal-dialog .modal-indhold .modal-body .undertekst {
skrifttype-vægt : 600 ;
tekst-transformation : store bogstaver ;
margen : 0 0 20 px ;
Skærm : blok ;
}Ifølge det givne kodestykke:
- “ skrifttype-vægt ” indstiller skrifttypens tykkelse.
- “ tekst-transformation ” indstiller skrifttypens store og små bogstaver.
Produktion
Sådan kan du style Bootstrap-modalen.
Konklusion
For at style Bootstrap-modalvinduet skal du først tilføje den knap, der udløser modalen. Lav derefter det modale vindue ved hjælp af HTML-elementer. Tilføj derefter flere CSS-egenskaber, inklusive ' polstring ', ' margen ', ' farve ', ' overgang ”, og mange flere til at style det modale vindue. Mere specifikt, ' kubik-bezier ”-funktionen bruges til at anvende overgangseffekten i en firepunktskurve på det modale vindue. Dette indlæg har forklaret proceduren for at style Bootstrap-modalen.