See kirjutis kirjeldab Bootstrapi modaali stiili kujundamist.
Kuidas Bootstrapi modaali kujundada?
Bootstrapi modaali stiili kujundamise õppimiseks järgige alltoodud samme.
1. samm: looge HTML-fail
Esmalt looge modaal, järgides alltoodud juhiseid.
- Loo ' ' konteiner ja määrake sellele klass ' põhi-modaal-konteiner ”.
- Seejärel lisage nupp, mis käivitab modaalakna. Määrake sellele ' btn ”, „ btn-primary ”, ja „ show-modaalne ” klassid. Määrake andmete atribuudid ' andmelüliti ' väärtusega ' modaalne ' ja ' andmesihtmärk ' koos ' #myModal ” väärtus. See ID osutab modaalakna ID-le.
- Järgmisena looge modaalaken. Selleks lisage '
' element ja määrake see ' modaalne ” ja „ tuhmuma ” klassid ja määrake id.- Lisa '
' modaali dialoogiboksi jaoks ja määrake sellele ' modaaldialoog ” klass.- Seejärel määrake modaali sisu lahtris '
' ja määrake sellele klass ' modaal-sisu ”.- Tehke klassiga sulgemisnupp ' Sulge ”. ' andmetest loobumine ” atribuuti kasutatakse modaalakna sulgemiseks.
- Seejärel määrake modaalkeha klassidega ' modaalkeha ” ja „ rida ”. Võtke selle sees veerg, mis koosneb 6 ruudustikust pildi jaoks ja 6 ruudustikust sisu jaoks.
- Pilt on manustatud kasutades '
” silti.
- Seejärel sees '
' element koos ' sisu ” klassi, lisage pealkiri, alapealkiri ja kirjeldus.- Pärast seda asetage nupp Bootstrapiga ' btn ”, “ btn-oht ”, ja „ p-2 ” klassid:
< div klass = 'põhimodaalkonteiner' >
< nuppu klass = 'btn btn-primary show-modal' andmelüliti = 'modaalne' andmed- sihtmärk = '#myModal' > vaade modaalne < / nuppu >
< div klass = 'modaalne tuhmumine' id = 'myModal' >
< div klass = 'modaalne dialoog' >
< div klass = 'modaalne sisu' >
< nuppu klass = 'Sulge' andmetest loobumine = 'modaalne' >
< ulatus > × < / ulatus >< / nuppu >
< div klass = 'modal-body rida' >
< div klass = 'col-sm-6 modal-image' >< img src = '/img/clothes.jpg' >< / div >
< div klass = 'sisu col-sm-6' >
< h3 klass = 'tiitel' > Eripakkumine < / h3 >
< ulatus klass = 'alapealkiri' > 20% soodsam kaasavõtmiseks ja kohaletoomiseks < / ulatus >
< lk klass = 'kirjeldus' > Parima kvaliteediga särgid. Saadaval on iga suurus. Kergesti pestav. < / lk >
< nuppu klass = 'btn btn-danger p-2' > VAATA ROHKEM < / nuppu >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >2. samm: kujundage klass 'peamine-modaal-konteiner'.
Kogu konteiner on kujundatud CSS-iga ' font-perekond ” vara:
.main-modal-container {
font-perekond : 'Poppinid' , ilma serifita ;
}3. samm: kujundage 'show-modaalne' klass
' show-modaalne ” klass on deklareeritud järgmiste omadustega:
.main-modal-container .show-modal {
värvi : #fff ;
taustavärv : #3a97c9 ;
teksti teisendus : suurtähtedega kirjutama ;
polsterdus : 10 pikslit 15 pikslit ;
marginaal : 80 pikslit auto 0 ;
kuva : blokk ;
}Siin:
- “ värvi ” määrab fondi värvi.
- “ taustavärv ” määrab elemendi taustavärvi.
- “ teksti teisendus ” kirjutatakse tekst suurtähtedega.
- “ polsterdus ” kohandab ruumi elemendi sisu ümber.
- “ marginaal ” tekitab elemendi ümber ruumi.
- “ kuva ' väärtusega ' blokk ” määrab elemendi laiuseks 100%.
4. samm: muutke fade'i stiiliks modaaldialoogi klass
.modaalne . tuhmub .modal-dialog {
teisendada : kaal ( 0 ) ;
üleminek : kõik 450 ms kuup-bezier ( .47 , 1.64 , .41 , .8 ) ;
}Kui modaal tuhmub, rakenduvad järgmised CSS-i atribuudid modaaldialoog ” klass:
- “ teisendada ' kinnisvara koos ' kaal() ” väärtus suurendab või vähendab elemendi suurust vertikaalselt või horisontaalselt.
- “ üleminek ” liigutab elementi järk-järgult. ' cubic-bezier() ” funktsioon rakendab kuupmeetri bezieri kõverat. See määratakse nelja punktiga.
5. samm: kujundage saates „modaalse dialoogiga” klass
.modaalne .näita .modal-dialog {
teisendada : kaal ( 1 ) ;
}CSS' teisendada ' vara väärtusega ' skaala (1) ” suurendab dialoogiboksi suurust.
6. samm: kujundage 'modaalse sisu' klass
.main-modal-container .modal-dialog .modal-sisu {
piiriraadius : 30 pikslit ;
piir : mitte ühtegi ;
ülevool : peidetud ;
}' modaal-sisu ” on kaunistatud järgmiste omadustega:
- “ piiriraadius ” ümardab elemendi servi.
- “ piir ' väärtusega ' mitte ühtegi ” varjab piiri.
- “ ülevool ” juhib sisu voogu.
7. samm: kujundage klassi 'sulgemine'.
.main-modal-container .modal-dialog .modal-sisu .Sulge {
värvi : #747474 ;
taustavärv : rgba ( 255 , 255 , 255 , 0.5 ) ;
kõrgus : 27 pikslit ;
laius : 27 pikslit ;
polsterdus : 0 ;
läbipaistmatus : 1 ;
ülevool : peidetud ;
positsiooni : absoluutne ;
õige : 15 pikslit ;
üleval : 15 pikslit ;
z-indeks : 2 ;
}Siin:
- “ läbipaistmatus ” määrab elemendi läbipaistvuse taseme.
- “ positsiooni ' väärtusega ' absoluutne ” määrab elemendi asukoha emapositsiooni suhtes.
- “ õige ” ja „ üleval ” määrake ruumi sulgemisnupu paremal ja ülaservas.
- “ z-indeks ” määrab elemendi virna järjekorra. Suurem virna järjekord toob elemendi ette.
8. samm: Stiilige 'modal-body' klass
.main-modal-container .modal-dialog .modal-sisu .modal-body {
polsterdus : 0 !tähtis ;
}Kogu modaalse korpuse ümber olevat ruumi reguleerib CSS ' polsterdus ” vara. Veelgi enam, ' !tähtis ” märksõna kasutatakse elemendi tähtsuse määramiseks.
9. samm: kujundage element 'img'.
.main-modal-container .modal-dialog .modal-sisu .modal-body .modal-image img {
kõrgus : 100% ;
laius : 100% ;
}10. samm: kujundage 'sisu' klass
.main-modal-container .modal-dialog .modal-sisu .modal-body .sisu {
polsterdus : 35 pikslit 30 pikslit ;
}Kasutades ' polsterdus ' kinnisvara, lisatakse ruumi '' ümber sisu ” klassi sisu.
11. samm: määrake klassi „tiitli” stiil
.main-modal-container .modal-dialog .modal-sisu .modal-body .title {
värvi : #fb3640 ;
font-perekond : 'Sacramento' , kursiiv ;
fondi suurus : 35 pikslit ;
}Siin:
- “ font-perekond ” määrab fondi stiili.
- “ fondi suurus ” määrab fondi suuruse.
12. samm: looge klass 'alapealkirjad'.
.main-modal-container .modal-dialog .modal-sisu .modal-body .alapealkiri {
font-weight : 600 ;
teksti teisendus : suurtähtedega ;
marginaal : 0 0 20 pikslit ;
kuva : blokk ;
}Vastavalt antud koodilõigule:
- “ font-weight ” määrab fondi paksuse.
- “ teksti teisendus ” määrab kirjasuuruse.
Väljund
Nii saate Bootstrapi modaali stiilida.
Järeldus
Bootstrapi modaalakna stiilimiseks lisage esmalt modaali käivitav nupp. Seejärel looge modaalaken HTML-elementide abil. Pärast seda lisage mitu CSS-i atribuuti, sealhulgas ' polsterdus ”, “ marginaal ”, “ värvi ”, “ üleminek ” ja palju muud modaalakna kujundamiseks. Täpsemalt öeldes ' kuup-bezier ” funktsiooni kasutatakse üleminekuefekti rakendamiseks modaalakna neljapunktilises kõveras. See postitus on selgitanud Bootstrapi modaali stiili kujundamise protseduuri.