Denne oppskriften vil beskrive hvordan du style Bootstrap-modalen.
Hvordan style Bootstrap-modalen?
For å lære hvordan du style Bootstrap-modalen, følg trinnene nedenfor.
Trinn 1: Lag en HTML-fil
Lag først en modal ved å følge instruksjonene nedenfor:
- Lage en ' ' container og tilordne den en klasse ' hoved-modal-container '.
- Deretter legger du til en knapp som vil utløse det modale vinduet. Tildel den ' btn ', ' btn-primær ', og ' show-modal ' klasser. Angi dataattributtene ' data-veksle ' med verdien ' modal ' og ' data-mål ' med ' #myModal 'verdi. Denne ID-en peker til ID-en til det modale vinduet.
- Deretter oppretter du det modale vinduet. For å gjøre det, legg til en '
' element og tilordne det ' modal ' og ' falme ”-klasser, og angi id.- Legg til en '
' for dialogboksen til modalen og tilordne den ' modal-dialog ' klasse.- Deretter spesifiser modalens innhold i en '
' og tilordne den klassen ' modalt innhold '.- Lag en lukkeknapp med klassen ' Lukk '. « dataavvisning ”-attributtet brukes til å lukke det modale vinduet.
- Deretter spesifiser den modale kroppen med klassene ' modal-kropp ' og ' rad '. Inni den, ta en kolonne med 6 rutenett for bildet og 6 for innholdet.
- Bildet er innebygd ved å bruke '
' stikkord.
- Deretter, inne i '
' element med ' innhold ”-klassen, legg til tittel, undertittel og beskrivelse.- Etter det, plasser en knapp med Bootstrap ' btn ', ' btn-fare ', og ' p-2 ' klasser:
< div klasse = 'hoved-modal-container' >
< knapp klasse = 'btn btn-primær show-modal' data-veksle = 'modal' data- mål = '#myModal' > se modal < / knapp >
< div klasse = 'modal fade' id = 'myModal' >
< div klasse = 'modal-dialog' >
< div klasse = 'modalt innhold' >
< knapp klasse = 'Lukk' data-avvis = 'modal' >
< span > × < / span >< / knapp >
< div klasse = 'modal-body rad' >
< div klasse = 'col-sm-6 modal-image' >< img src = '/img/clothes.jpg' >< / div >
< div klasse = 'innhold col-sm-6' >
< h3 klasse = 'tittel' > Spesialtilbud < / h3 >
< span klasse = 'undertittel' > 20 % rabatt på takeaway og levering < / span >
< s klasse = 'beskrivelse' > Skjorter av beste kvalitet. Hver størrelse er tilgjengelig. Lett vaskbar. < / s >
< knapp klasse = 'btn btn-fare p-2' > SE MER < / knapp >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Trinn 2: Stil 'main-modal-container' klasse
Hele beholderen er stylet med CSS ' font-familie ' eiendom:
.main-modal-container {
font-familie : 'Poppins' , sans serif ;
}Trinn 3: Stil 'show-modal' klasse
« show-modal Klasse er deklarert med følgende egenskaper:
.main-modal-container .show-modal {
farge : #fff ;
bakgrunnsfarge : #3a97c9 ;
tekstforvandling : bruk store bokstaver ;
polstring : 10 piksler 15 piksler ;
margin : 80 piksler auto 0 ;
vise : blokkere ;
}Her:
- ' farge ' angir skriftfargen.
- ' bakgrunnsfarge ' angir elementets bakgrunnsfarge.
- ' tekstforvandling ” skriver stor bokstav i teksten.
- ' polstring ” justerer plass rundt elementets innhold.
- ' margin ” produserer plass rundt elementet.
- ' vise ' med verdien ' blokkere ' setter elementets bredde til 100 %.
Trinn 4: Stil 'modal-dialog'-klassen på Fade
.modal .falme .modal-dialog {
forvandle : skala ( 0 ) ;
overgang : alle 450 ms kubikk-bezier ( .47 , 1,64 , .41 , .8 ) ;
}Når modalen falmer, brukes følgende CSS-egenskaper på ' modal-dialog ' klasse:
- ' forvandle ' eiendom med ' skala() ” verdi øker eller reduserer elementets størrelse vertikalt eller horisontalt.
- ' overgang ” flytter elementet gradvis. « cubic-bezier() ”-funksjonen bruker den kubiske bezier-kurven. Det bestemmes av fire poeng.
Trinn 5: Stil 'modal-dialog' klasse på utstilling
.modal .forestilling .modal-dialog {
forvandle : skala ( 1 ) ;
}CSS ' forvandle ' eiendom med verdien ' skala (1) ” øker størrelsen på dialogboksen.
Trinn 6: Stil 'modal-content' klasse
.main-modal-container .modal-dialog .modal-innhold {
grense-radius : 30 piksler ;
grense : ingen ;
flyte : skjult ;
}« modalt innhold ” er dekorert med følgende egenskaper:
- ' grense-radius ” runder elementets kanter.
- ' grense ' med verdien ' ingen ” skjuler grensen.
- ' flyte ' kontrollerer innholdets flyt.
Trinn 7: Style 'nær' klasse
.main-modal-container .modal-dialog .modal-innhold .Lukk {
farge : #747474 ;
bakgrunnsfarge : rgba ( 255 , 255 , 255 , 0,5 ) ;
høyde : 27 piksler ;
bredde : 27 piksler ;
polstring : 0 ;
opasitet : 1 ;
flyte : skjult ;
posisjon : absolutt ;
Ikke sant : 15 piksler ;
topp : 15 piksler ;
z-indeks : 2 ;
}Her:
- ' opasitet ' definerer elementets gjennomsiktighetsnivå.
- ' posisjon ' med verdien ' absolutt ' setter elementets posisjon i forhold til dets overordnede posisjon.
- ' Ikke sant ' og ' topp ” angi plass til høyre og øverst på lukkeknappen.
- ' z-indeks ' spesifiserer elementets stabelrekkefølge. Den større stabelrekkefølgen bringer elementet til fronten.
Trinn 8: Stil 'modal-body' klasse
.main-modal-container .modal-dialog .modal-innhold .modal-body {
polstring : 0 !viktig ;
}Plassen rundt hele den modale kroppen justeres av CSS ' polstring ' eiendom. Dessuten, ' !viktig ' nøkkelord brukes til å angi elementets betydning.
Trinn 9: Stil 'img'-elementet
.main-modal-container .modal-dialog .modal-innhold .modal-body .modal-image img {
høyde : 100 % ;
bredde : 100 % ;
}Trinn 10: Style 'innholdsklassen'.
.main-modal-container .modal-dialog .modal-innhold .modal-body .innhold {
polstring : 35 piksler 30 piksler ;
}Ved å bruke ' polstring ' eiendommen legges plassen til rundt ' innhold ' klassens innhold.
Trinn 11: Stil 'tittel' klasse
.main-modal-container .modal-dialog .modal-innhold .modal-body .tittel {
farge : #fb3640 ;
font-familie : 'Sacramento' , kursiv ;
skriftstørrelse : 35 piksler ;
}Her:
- ' font-familie ' definerer skrifttypens stil.
- ' skriftstørrelse ' angir skriftstørrelsen.
Trinn 12: Stil 'undertittel' klasse
.main-modal-container .modal-dialog .modal-innhold .modal-body .undertittel {
font-vekt : 600 ;
tekstforvandling : stor bokstav ;
margin : 0 0 20 piksler ;
vise : blokkere ;
}I henhold til den gitte kodebiten:
- ' font-vekt ' angir skrifttypens tykkelse.
- ' tekstforvandling ” setter skriftstørrelsen.
Produksjon
Slik kan du style Bootstrap-modalen.
Konklusjon
For å style Bootstrap-modalvinduet, legg først til knappen som vil utløse modalen. Lag deretter det modale vinduet ved hjelp av HTML-elementer. Etter det legger du til flere CSS-egenskaper, inkludert ' polstring ', ' margin ', ' farge ', ' overgang ”, og mange flere for å style det modale vinduet. Mer spesifikt, ' kubikk-bezier ”-funksjonen brukes til å bruke overgangseffekten i en firepunktskurve på det modale vinduet. Dette innlegget har forklart prosedyren for å style Bootstrap-modalen.