In dit artikel wordt beschreven hoe de Bootstrap-modal moet worden vormgegeven.
Hoe de Bootstrap-modal te stylen?
Volg de onderstaande stappen om te leren hoe u de Bootstrap-modal kunt stylen.
Stap 1: Maak een HTML-bestand
Maak eerst een modaal door de onderstaande instructies te volgen:
- Maak een ' 'container en wijs er een klasse aan toe' main-modale-container ”.
- Voeg vervolgens een knop toe die het modale venster activeert. Wijs het toe aan de ' btn ”, “ btn-primair ', En ' showmodaal ' klassen. Stel de gegevensattributen in ' data-toggle ” met de waarde “ modaal ' en de ' data-doel ' met de ' #mijnModal ' waarde. Deze id verwijst naar de id van het modale venster.
- Maak vervolgens het modale venster. Voeg hiervoor een '
” element en wijs het toe “ modaal ' En ' vervagen ' klassen, en stel de id in.- Voeg een ... toe '
' voor het dialoogvenster van de modale en wijs het de ' modaal-dialoogvenster ' klas.- Geef vervolgens de inhoud van de modal op in een '
' en wijs deze de klasse ' modale inhoud ”.- Maak een sluitknop met de klas ' dichtbij ”. De ' data-ontslaan ” attribuut wordt gebruikt om het modale venster te sluiten.
- Specificeer vervolgens de modale body met de klassen ' modaal lichaam ' En ' rij ”. Neem daarin een kolom van 6 rasters voor de afbeelding en 6 voor de inhoud.
- De afbeelding is ingesloten met behulp van de '
' label.
- Dan, binnen de “
”-element met de “ inhoud ” class, voeg de titel, ondertitel en beschrijving toe.- Plaats daarna een knop met de Bootstrap ' btn ”, “ btn-gevaar ', En ' p-2 ' klassen:
< div klas = 'main-modale-container' >
< knop klas = 'btn btn-primair showmodaal' data-toggle = 'modaal' gegevens- doel = '#mijnModal' > bekijk modaal < / knop >
< div klas = 'modaal vervagen' ID kaart = 'mijnModaal' >
< div klas = 'modal-dialoog' >
< div klas = 'modale inhoud' >
< knop klas = 'dichtbij' data-ontslaan = 'modaal' >
< span > × < / span >< / knop >
< div klas = 'rij met modale carrosserie' >
< div klas = 'col-sm-6 modale afbeelding' >< img src = '/img/kleding.jpg' >< / div >
< div klas = 'inhoud col-sm-6' >
< h3 klas = 'titel' > Speciale aanbieding < / h3 >
< span klas = 'ondertitel' > 20% korting op afhalen en bezorgen < / span >
< P klas = 'beschrijving' > Overhemden van de beste kwaliteit. Elke maat is beschikbaar. Gemakkelijk wasbaar. < / P >
< knop klas = 'btn btn-gevaar p-2' > BEKIJK MEER < / knop >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Stap 2: Stijl “main-modal-container” Klasse
De hele container is gestyled met de CSS “ font-familie ' eigendom:
.main-modale-container {
font-familie : 'Poppins' , schreefloos ;
}Stap 3: Stijl 'show-modal' Class
De ' showmodaal ” klasse wordt gedeclareerd met de volgende eigenschappen:
.main-modale-container .show-modaal {
kleur : #fff ;
Achtergrond kleur : #3a97c9 ;
tekst-transformatie : kapitaliseren ;
opvulling : 10px 15px ;
marge : 80px auto 0 ;
weergave : blok ;
}Hier:
- “ kleur ” stelt de letterkleur in.
- “ Achtergrond kleur ” stelt de achtergrondkleur van het element in.
- “ tekst-transformatie ” schrijft de tekst met een hoofdletter.
- “ opvulling 'past de ruimte rond de inhoud van het element aan.
- “ marge ” creëert ruimte rondom het element.
- “ weergave ” met de waarde “ blok ” stelt de breedte van het element in op 100%.
Stap 4: Stijl 'modal-dialog' Class on Fade
.modaal .vervagen .modaal-dialoogvenster {
transformeren : schaal ( 0 ) ;
overgang : alle 450 ms kubieke-bezier ( .47 , 1.64 , .41 , .8 ) ;
}Wanneer de modal vervaagt, worden de volgende CSS-eigenschappen toegepast op de ' modaal-dialoogvenster ' klas:
- “ transformeren ” woning met de “ schaal() ” waarde vergroot of verkleint de grootte van het element verticaal of horizontaal.
- “ overgang ” beweegt het element geleidelijk. De ' kubieke-bezier() ” functie past de kubieke bezier-curve toe. Het wordt bepaald door vier punten.
Stap 5: Stijl 'modal-dialog' Class on Show
.modaal .show .modaal-dialoogvenster {
transformeren : schaal ( 1 ) ;
}De CSS “ transformeren ” eigenschap met de waarde “ schaal(1) ” vergroot de grootte van het dialoogvenster.
Stap 6: Stijl “modal-content” Class
.main-modale-container .modaal-dialoogvenster .modal-inhoud {
grensradius : 30px ;
grens : geen ;
overloop : verborgen ;
}De ' modale inhoud ” is versierd met de volgende eigenschappen:
- “ grensradius rondt de randen van het element af.
- “ grens ” met de waarde “ geen ” verbergt de grens.
- “ overloop ” regelt de stroom van de inhoud.
Stap 7: Stijl 'close' Class
.main-modale-container .modaal-dialoogvenster .modal-inhoud .dichtbij {
kleur : #747474 ;
Achtergrond kleur : RGBA ( 255 , 255 , 255 , 0,5 ) ;
hoogte : 27px ;
breedte : 27px ;
opvulling : 0 ;
ondoorzichtigheid : 1 ;
overloop : verborgen ;
positie : absoluut ;
rechts : 15px ;
bovenkant : 15px ;
z-index : 2 ;
}Hier:
- “ ondoorzichtigheid ” definieert het transparantieniveau van het element.
- “ positie ” met de waarde “ absoluut ” stelt de positie van het element in ten opzichte van de bovenliggende positie.
- “ rechts ' En ' bovenkant ” stel ruimte rechts en bovenaan de knop Sluiten in.
- “ z-index ” specificeert de stapelvolgorde van het element. De grotere stapelvolgorde brengt het element naar voren.
Stap 8: Stijl 'modal-body' klasse
.main-modale-container .modaal-dialoogvenster .modal-inhoud .modaal lichaam {
opvulling : 0 !belangrijk ;
}Ruimte rond de gehele modale body wordt aangepast door CSS “ opvulling ' eigendom. Bovendien is de “ !belangrijk ” sleutelwoord wordt gebruikt om het belang van het element in te stellen.
Stap 9: Stijl 'img' Element
.main-modale-container .modaal-dialoogvenster .modal-inhoud .modaal lichaam .modal-beeld img {
hoogte : 100% ;
breedte : 100% ;
}Stap 10: Stijl de 'inhoud' -klasse
.main-modale-container .modaal-dialoogvenster .modal-inhoud .modaal lichaam .inhoud {
opvulling : 35px 30px ;
}Door gebruik te maken van de “ opvulling ” eigendom, wordt de ruimte toegevoegd rond de “ inhoud de inhoud van de klas.
Stap 11: Stijl 'titel' Klasse
.main-modale-container .modaal-dialoogvenster .modal-inhoud .modaal lichaam .titel {
kleur : #fb3640 ;
font-familie : 'Sacramento' , cursief ;
lettertypegrootte : 35px ;
}Hier:
- “ font-familie ” definieert de stijl van het lettertype.
- “ lettertypegrootte ' stelt de grootte van het lettertype in.
Stap 12: Stijl 'ondertitel' Klasse
.main-modale-container .modaal-dialoogvenster .modal-inhoud .modaal lichaam .ondertitel {
lettertype dikte : 600 ;
tekst-transformatie : hoofdletters ;
marge : 0 0 20px ;
weergave : blok ;
}Volgens het gegeven codefragment:
- “ lettertype dikte 'stelt de dikte van het lettertype in.
- “ tekst-transformatie ” stelt het lettertype in.
Uitgang
Zo kun je de Bootstrap-modal stylen.
Conclusie
Om het modale Bootstrap-venster vorm te geven, voegt u eerst de knop toe die het modale venster activeert. Maak vervolgens het modale venster met behulp van HTML-elementen. Voeg daarna verschillende CSS-eigenschappen toe, waaronder ' opvulling ”, “ marge ”, “ kleur ”, “ overgang ”, en nog veel meer om het modale venster te stylen. Meer specifiek, de “ kubieke-bezier De functie ” wordt gebruikt om het overgangseffect toe te passen in een vierpuntscurve op het modale venster. Dit bericht heeft de procedure uitgelegd om de Bootstrap-modaal te stylen.