Paano I-istilo ang Bootstrap Modal

Ang pop-up window ay tumutukoy sa maliit na window sa screen ng kasalukuyang window. Ito ay ginagamit upang magpakita ng karagdagang o bagong impormasyon sa anumang aplikasyon. Minsan, ito ay kilala rin bilang isang patalastas. Nagbibigay ang Bootstrap ng maraming klase na makakatulong upang madaling makagawa ng mga modal window. Gayunpaman, gamit ang CSS, ang modal window ay maaaring idisenyo ayon sa iyong mga gusto.

Ilalarawan ng write-up na ito kung paano i-istilo ang Bootstrap modal.

Paano I-istilo ang Bootstrap modal?

Upang matutunan kung paano i-istilo ang Bootstrap modal, sundin ang mga hakbang sa ibaba.

Hakbang 1: Gumawa ng HTML File

Una, lumikha ng isang modal sa pamamagitan ng pagsunod sa mga tagubiling ibinigay sa ibaba:

Gumawa ng '
'lalagyan at italaga ito ng isang klase' pangunahing-modal-lalagyan ”.
Pagkatapos, magdagdag ng button na magti-trigger sa modal window. Italaga ito sa ' btn ”, “ btn-pangunahin ”, at “ show-modal ” mga klase. Itakda ang mga katangian ng data ' data-toggle 'na may halaga' modal ' at ang ' data-target ' kasama ang ' #myModal ” halaga. Ang id na ito ay tumuturo sa id ng modal window.
Susunod, lumikha ng modal window. Upang gawin ito, magdagdag ng '
'elemento at italaga ito' modal 'at' kumupas ” klase, at itakda ang id.
Magdagdag ng '
” para sa dialog box ng modal at italaga dito ang “ modal-dialog ” klase.
Pagkatapos, tukuyin ang nilalaman ng modal sa isang '
' at italaga ito sa klase ' modal-nilalaman ”.
Gumawa ng close button sa klase ' malapit na ”. Ang ' data-dismiss 'Ang attribute ay ginagamit upang isara ang modal window.
Pagkatapos, tukuyin ang modal body na may mga klase na ' modal-katawan 'at' hilera ”. Sa loob nito, kumuha ng column ng 6 na grids para sa larawan at 6 para sa content.
Ang larawan ay naka-embed gamit ang ' ” tag.
Pagkatapos, sa loob ng '
'elemento na may ' nilalaman ” class, idagdag ang pamagat, subtitle, at paglalarawan.
Pagkatapos nito, maglagay ng isang pindutan na may Bootstrap ' btn ”, “ btn-panganib ”, at “ p-2 'mga klase:

< div klase = 'pangunahing-modal-lalagyan' >

< pindutan klase = 'btn btn-pangunahing show-modal' data-toggle = 'modal' datos- target = '#myModal' > tingnan ang modal < / pindutan >

< div klase = 'modal fade' id = 'myModal' >

< div klase = 'modal-dialog' >

< div klase = 'modal-content' >

< pindutan klase = 'malapit' data-dismiss = 'modal' >

< span > × < / span >< / pindutan >

< div klase = 'modal-body row' >

< div klase = 'col-sm-6 modal-image' >< img src = '/img/clothes.jpg' >< / div >

< div klase = 'content col-sm-6' >

< h3 klase = 'pamagat' > Espesyal na Alok < / h3 >

< span klase = 'sub-title' > 20% diskwento sa takeout at delivery < / span >

< p klase = 'paglalarawan' > Pinakamahusay na kalidad ng mga kamiseta. Ang bawat sukat ay magagamit. Madaling hugasan. < / p >

< pindutan klase = 'btn btn-panganib p-2' > TUMINGIN PA < / pindutan >

< / div >

< / div >

< / div >

< / div >

< / div >

< / div >

Hakbang 2: Istilo ang 'pangunahing-modal-lalagyan' na Klase

Ang buong lalagyan ay naka-istilo sa CSS ' font-family ” ari-arian:

.pangunahing-modal-lalagyan {

font-family : 'Poppins' , sans serif ;

}

Hakbang 3: Istilo ang 'show-modal' na Klase

Ang ' show-modal ” class ay idineklara na may mga sumusunod na katangian:

.pangunahing-modal-lalagyan .show-modal {

kulay : #fff ;

kulay ng background : #3a97c9 ;

text-transform : i-capitalize ;

padding : 10px 15px ;

margin : 80px sasakyan 0 ;

display : harangan ;

}

dito:

“ kulay ” nagtatakda ng kulay ng font.
“ kulay ng background ” nagtatakda ng kulay ng background ng elemento.
“ text-transform ” ginagamitan ng malaking titik ang teksto.
“ padding ” inaayos ang espasyo sa paligid ng nilalaman ng elemento.
“ margin ” gumagawa ng espasyo sa paligid ng elemento.
“ display 'na may halaga' harangan ” itinatakda ang lapad ng elemento sa 100%.

Hakbang 4: Istilo ang 'modal-dialog' na Klase sa Fade

.modal .kupas .modal-dialog {

ibahin ang anyo : sukat ( 0 ) ;

paglipat : lahat 450ms kubiko-bezier ( .47 , 1.64 , .41 , .8 ) ;

}

Kapag nawala ang modal, ang mga sumusunod na katangian ng CSS ay inilalapat sa ' modal-dialog 'klase:

“ ibahin ang anyo ” ari-arian na may “ sukat () ” pinapataas o binabawasan ng halaga ang laki ng elemento nang patayo o pahalang.
“ paglipat ” unti-unting gumagalaw ang elemento. Ang ' cubic-bezier() ” function na inilalapat ang cubic bezier curve. Ito ay tinutukoy ng apat na puntos.

Hakbang 5: Istilo ang 'modal-dialog' na Klase sa Palabas

.modal .palabas .modal-dialog {

ibahin ang anyo : sukat ( 1 ) ;

}

Ang CSS ' ibahin ang anyo ' ari-arian na may halaga ' sukat(1) ” pinapataas ang laki ng dialog box.

Hakbang 6: Istilo ang 'modal-content' na Klase

.pangunahing-modal-lalagyan .modal-dialog .modal-content {

hangganan-radius : 30px ;

hangganan : wala ;

pag-apaw : nakatago ;

}

Ang ' modal-nilalaman ” ay pinalamutian ng mga sumusunod na katangian:

“ hangganan-radius ” pinaikot ang mga gilid ng elemento.
“ hangganan 'na may halaga' wala ” nagtatago sa hangganan.
“ pag-apaw ” kumokontrol sa daloy ng nilalaman.

Hakbang 7: Istilo ang 'malapit' na Klase

.pangunahing-modal-lalagyan .modal-dialog .modal-content .malapit {

kulay : #747474 ;

kulay ng background : rgba ( 255 , 255 , 255 , 0.5 ) ;

taas : 27px ;

lapad : 27px ;

padding : 0 ;

opacity : 1 ;

pag-apaw : nakatago ;

posisyon : ganap ;

tama : 15px ;

itaas : 15px ;

z-index : 2 ;

}

dito:

“ opacity ” ay tumutukoy sa antas ng transparency ng elemento.
“ posisyon 'na may halaga' ganap ” nagtatakda ng posisyon ng elemento na nauugnay sa posisyon ng magulang nito.
“ tama 'at' itaas ” itakda ang espasyo sa kanan at itaas ng button na isara.
“ z-index ” ay tumutukoy sa pagkakasunud-sunod ng stack ng elemento. Ang mas malaking pagkakasunud-sunod ng stack ay nagdadala ng elemento sa harap.

Hakbang 8: Istilo ang 'modal-body' na Klase

.pangunahing-modal-lalagyan .modal-dialog .modal-content .modal-katawan {

padding : 0 !mahalaga ;

}

Ang espasyo sa paligid ng buong modal body ay inaayos ng CSS ' padding ” ari-arian. Bukod dito, ang ' !mahalaga 'Ang keyword ay ginagamit upang itakda ang kahalagahan ng elemento.

Hakbang 9: Istilo ang 'img' Element

.pangunahing-modal-lalagyan .modal-dialog .modal-content .modal-katawan .modal-imahe img {

taas : 100% ;

lapad : 100% ;

}

Hakbang 10: I-istilo ang 'nilalaman' na Klase

.pangunahing-modal-lalagyan .modal-dialog .modal-content .modal-katawan .nilalaman {

padding : 35px 30px ;

}

Sa pamamagitan ng paggamit ng ' padding ” property, idinaragdag ang espasyo sa paligid ng “ nilalaman ” nilalaman ng klase.

Hakbang 11: Istilo ang 'title' na Klase

.pangunahing-modal-lalagyan .modal-dialog .modal-content .modal-katawan .title {

kulay : #fb3640 ;

font-family : 'Sacramento' , cursive ;

laki ng font : 35px ;

}

dito:

“ font-family ” ay tumutukoy sa istilo ng font.
“ laki ng font ” nagtatakda ng laki ng font.

Hakbang 12: Istilo ang 'sub-title' na Klase

.pangunahing-modal-lalagyan .modal-dialog .modal-content .modal-katawan .sub-title {

bigat ng font : 600 ;

text-transform : malaking titik ;

margin : 0 0 20px ;

display : harangan ;

}

Ayon sa ibinigay na snippet ng code:

“ bigat ng font ” nagtatakda ng kapal ng font.
“ text-transform ” itinatakda ang case ng font.

Output

Ito ay kung paano mo mai-istilo ang Bootstrap modal.

Konklusyon

Upang i-istilo ang Bootstrap modal window, idagdag muna ang button na magti-trigger sa modal. Pagkatapos, gawin ang modal window gamit ang mga elemento ng HTML. Pagkatapos nito, magdagdag ng ilang mga katangian ng CSS, kabilang ang ' padding ”, “ margin ”, “ kulay ”, “ paglipat ”, at marami pang iba para i-istilo ang modal window. Mas partikular, ang ' kubiko-bezier Ang function na ” ay ginagamit para ilapat ang transition effect sa isang four points curve sa modal window. Ipinaliwanag ng post na ito ang pamamaraan sa pag-istilo ng Bootstrap modal.

Paano I-istilo ang Bootstrap Modal