Tento zápis popisuje, ako štýlovať modal Bootstrap.
Ako upraviť štýl Bootstrap modalu?
Ak sa chcete dozvedieť, ako upraviť štýl Bootstrap modálu, postupujte podľa krokov nižšie.
Krok 1: Vytvorte súbor HTML
Najprv vytvorte modal podľa pokynov uvedených nižšie:
- Vytvor ' 'kontajner a priraďte mu triedu' hlavný-modálny-kontajner “.
- Potom pridajte tlačidlo, ktoré spustí modálne okno. Priraďte mu „ btn “, “ btn-primárne “ a „ show-modal “triedy. Nastavte atribúty údajov „ prepínanie údajov “ s hodnotou “ modálny “ a „ dátový cieľ “ s „ #myModal “hodnota. Toto id ukazuje na id modálneho okna.
- Ďalej vytvorte modálne okno. Ak to chcete urobiť, pridajte „
prvok a priraďte ho modálny “ a „ vyblednúť ” a nastavte id.- Pridaj '
“ pre dialógové okno modálu a priraďte mu „ modálny-dialóg ' trieda.- Potom špecifikujte obsah modálu v „
“ a priraďte mu triedu „ modálny obsah “.- Vytvorte tlačidlo zatvorenia s triedou “ Zavrieť “. ' data-dismiss ” sa používa na zatvorenie modálneho okna.
- Potom zadajte modálne telo s triedami “ modálne telo “ a „ riadok “. Vnútri vezmite stĺpec 6 mriežok pre obrázok a 6 pre obsah.
- Obrázok je vložený pomocou „
” tag.
- Potom vo vnútri „
'prvok s ' obsahu “, pridajte názov, podnadpis a popis.- Potom umiestnite tlačidlo s Bootstrap “ btn “, “ btn-nebezpečenstvo “ a „ p-2 “triedy:
< div trieda = 'hlavný-modálny-kontajner' >
< tlačidlo trieda = 'btn btn-primary show-modal' prepínanie údajov = 'modálny' údaje- cieľ = '#myModal' > modálny pohľad < / tlačidlo >
< div trieda = 'modálne vyblednutie' id = 'myModal' >
< div trieda = 'modálny-dialóg' >
< div trieda = 'modálny obsah' >
< tlačidlo trieda = 'Zavrieť' data-dismiss = 'modálny' >
< rozpätie > × < / rozpätie < / tlačidlo >
< div trieda = 'modálny rad telies' >
< div trieda = 'col-sm-6 modal-image' < img src = '/img/oblečenie.jpg' < / div >
< div trieda = 'content col-sm-6' >
< h3 trieda = 'titul' > Špeciálna ponuka < / h3 >
< rozpätie trieda = 'podnadpis' > 20% zľava na odber a doručenie < / rozpätie >
< p trieda = 'popis' > Tričká najvyššej kvality. Každá veľkosť je k dispozícii. Ľahko umývateľný. < / p >
< tlačidlo trieda = 'btn btn-nebezpečenstvo p-2' > VIDIEŤ VIAC < / tlačidlo >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Krok 2: Štýl triedy „hlavný-modálny-kontajner“.
Celý kontajner je štylizovaný pomocou CSS “ font-family ' nehnuteľnosť:
.hlavný-modálny-kontajner {
font-family : 'Poppins' , sans serif ;
}Krok 3: Štýl triedy „show-modal“.
' show-modal Trieda ” je deklarovaná s nasledujúcimi vlastnosťami:
.hlavný-modálny-kontajner .show-modal {
farba : #fff ;
farba pozadia : #3a97c9 ;
textová transformácia : kapitalizovať ;
vypchávka : 10 pixelov 15 pixelov ;
marža : 80 pixelov auto 0 ;
displej : blokovať ;
}Tu:
- “ farba ” nastavuje farbu písma.
- “ farba pozadia “ nastavuje farbu pozadia prvku.
- “ textová transformácia ” začína veľkými písmenami.
- “ vypchávka “ upravuje priestor okolo obsahu prvku.
- “ marža “ vytvára priestor okolo prvku.
- “ displej “ s hodnotou “ blokovať ” nastaví šírku prvku na 100 %.
Krok 4: Štýl triedy „modálny-dialógový“ na Fade
.modálny .vyblednúť .modálny-dialóg {
transformovať : stupnica ( 0 ) ;
prechod : všetky 450 ms kubický-bezier ( .47 , 1,64 , .41 , .8 ) ;
}Keď modal zmizne, nasledujúce vlastnosti CSS sa aplikujú na „ modálny-dialóg ' trieda:
- “ transformovať ” nehnuteľnosť s “ mierka() ” zväčšuje alebo zmenšuje veľkosť prvku vertikálne alebo horizontálne.
- “ prechod “ postupne posúva prvok. ' cubic-bezier() ” použije kubickú Bézierovu krivku. Je určená štyrmi bodmi.
Krok 5: Vytvorte štýl triedy „modal-dialog“ na Show
.modálny .šou .modálny-dialóg {
transformovať : stupnica ( 1 ) ;
}CSS ' transformovať “vlastnosť s hodnotou” mierka (1) ” zväčší veľkosť dialógového okna.
Krok 6: Štýl triedy „modálny obsah“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah {
hraničný polomer : 30 pixelov ;
hranica : žiadny ;
pretečeniu : skryté ;
}' modálny obsah “ zdobia nasledujúce vlastnosti:
- “ hraničný polomer “ zaobľuje okraje prvku.
- “ hranica “ s hodnotou “ žiadny “ skryje hranicu.
- “ pretečeniu “ riadi tok obsahu.
Krok 7: Štýl triedy „uzavrieť“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah .Zavrieť {
farba : #747474 ;
farba pozadia : rgba ( 255 , 255 , 255 , 0,5 ) ;
výška : 27 pixelov ;
šírka : 27 pixelov ;
vypchávka : 0 ;
nepriehľadnosť : 1 ;
pretečeniu : skryté ;
pozíciu : absolútne ;
správny : 15 pixelov ;
top : 15 pixelov ;
z-index : 2 ;
}Tu:
- “ nepriehľadnosť “ definuje úroveň transparentnosti prvku.
- “ pozíciu “ s hodnotou “ absolútne ” nastavuje polohu prvku vzhľadom na jeho nadradenú polohu.
- “ správny “ a „ top ” nastavte medzeru na pravej a hornej strane tlačidla zatvorenia.
- “ z-index “ určuje poradie zásobníka prvku. Väčšie poradie stohu posúva prvok dopredu.
Krok 8: Štýl triedy „modal-body“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah .modálne-telo {
vypchávka : 0 !dôležité ;
}Priestor okolo celého modálneho tela je upravený pomocou CSS “ vypchávka ' nehnuteľnosť. Navyše, „ !dôležité Kľúčové slovo ” sa používa na nastavenie dôležitosti prvku.
Krok 9: Štýl prvku „img“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah .modálne-telo .modálny-obrázok img {
výška : 100% ;
šírka : 100% ;
}Krok 10: Vytvorte štýl triedy „obsahu“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah .modálne-telo .obsah {
vypchávka : 35 pixelov 30 pixelov ;
}Pomocou „ vypchávka “, priestor je pridaný okolo “ obsahu “obsah triedy.
Krok 11: Štýl triedy „title“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah .modálne-telo .názov {
farba : #fb3640 ;
font-family : 'Sacramento' , kurzíva ;
veľkosť písma : 35 pixelov ;
}Tu:
- “ font-family “ definuje štýl písma.
- “ veľkosť písma “ nastavuje veľkosť písma.
Krok 12: Štýl triedy „podtitul“.
.hlavný-modálny-kontajner .modálny-dialóg .modálny-obsah .modálne-telo .podnadpis {
font-weight : 600 ;
textová transformácia : veľké písmená ;
marža : 0 0 20 pixelov ;
displej : blokovať ;
}Podľa daného útržku kódu:
- “ font-weight “ nastavuje hrúbku písma.
- “ textová transformácia “ nastavuje veľkosť písma.
Výkon
Takto môžete upraviť modal Bootstrap.
Záver
Ak chcete upraviť modálne okno Bootstrap, najprv pridajte tlačidlo, ktoré spustí modálne okno. Potom vytvorte modálne okno pomocou prvkov HTML. Potom pridajte niekoľko vlastností CSS vrátane „ vypchávka “, “ marža “, “ farba “, “ prechod “ a mnoho ďalších na úpravu modálneho okna. Presnejšie povedané, „ kubický-bezier ” sa používa na aplikáciu prechodového efektu v štvorbodovej krivke v modálnom okne. V tomto príspevku je vysvetlený postup úpravy modálu Bootstrap.