Ez az írás leírja a Bootstrap modális stílusát.
Hogyan alakítsuk ki a Bootstrap modált?
A Bootstrap modális stílusának megismeréséhez kövesse az alábbi lépéseket.
1. lépés: Hozzon létre egy HTML-fájlt
Először hozzon létre egy modált az alábbi utasításokat követve:
- Hozzon létre egy ' 'tároló és rendeljen hozzá egy osztályt' main-modal-container ”.
- Ezután adjon hozzá egy gombot, amely elindítja a modális ablakot. Rendelje hozzá a „ btn ”, „ btn-elsődleges ”, és „ show-modális ” osztályok. Állítsa be az adatattribútumokat ' data-toggle ' értékkel ' modális ' és a ' adatcél ' a ... val ' #myModal ” értékét. Ez az azonosító a modális ablak azonosítójára mutat.
- Ezután hozza létre a modális ablakot. Ehhez adjon hozzá egy „
' elemet, és rendelje hozzá' modális ” és „ áttűnés ” osztályokat, és állítsa be az azonosítót.- Adj hozzá egy '
” a modális párbeszédpanelhez, és rendelje hozzá a „ modális-dialógus ' osztály.- Ezután adja meg a modális tartalmát a „
”-ben, és rendelje hozzá a „” osztályt. modális tartalom ”.- Nyomjon bezárás gombot az osztállyal Bezárás ”. A ' adatelvetés ” attribútumot használjuk a modális ablak bezárására.
- Ezután adja meg a modális törzset az osztályokkal modális-test ” és „ sor ”. Vegyünk benne egy 6 rácsból álló oszlopot a képhez és 6-ból a tartalomhoz.
- A kép beágyazása a „
” címke.
- Ezután a „
' elem a ' tartalom ” osztályba, adja hozzá a címet, az alcímet és a leírást.- Ezután helyezzen el egy gombot a Bootstrap ' btn ”, „ btn-veszély ”, és „ p-2 ” osztályok:
< div osztály = 'fő-modal-container' >
< gomb osztály = 'btn btn-primary show-modal' data-toggle = 'modális' adat- cél = '#myModal' > modális nézet < / gomb >
< div osztály = 'modális fade' id = 'myModal' >
< div osztály = 'modális párbeszéd' >
< div osztály = 'modális tartalom' >
< gomb osztály = 'Bezárás' adatelvetés = 'modális' >
< span > × < / span >< / gomb >
< div osztály = 'modális-test sor' >
< div osztály = 'col-sm-6 modal-image' >< img src = '/img/clothes.jpg' >< / div >
< div osztály = 'content col-sm-6' >
< h3 osztály = 'cím' > Különleges ajánlat < / h3 >
< span osztály = 'felirat' > 20% kedvezmény az elvitelre és a kiszállításra < / span >
< p osztály = 'leírás' > A legjobb minőségű ingek. Minden méret elérhető. Könnyen mosható. < / p >
< gomb osztály = 'btn btn-danger p-2' > MUTASS TÖBBET < / gomb >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >2. lépés: Stílus: „fő-modális-konténer” osztály
Az egész konténer stílusa CSS-szel van ' betűtípus család ' ingatlan:
.main-modal-container {
betűtípus család : 'Poppins' , sans serif ;
}3. lépés: Stílus „show-modális” osztály
A ' show-modális ” osztály a következő tulajdonságokkal van deklarálva:
.main-modal-container .show-modal {
szín : #fff ;
háttérszín : #3a97c9 ;
szöveg-átalakítás : nagybetűvel írjuk ;
párnázás : 10 képpont 15 képpont ;
árrés : 80 képpont auto 0 ;
kijelző : Blokk ;
}Itt:
- ' szín ” állítja be a betűszínt.
- ' háttérszín ” beállítja az elem háttérszínét.
- ' szöveg-átalakítás ” nagybetűvel írja a szöveget.
- ' párnázás ” beállítja az elem tartalma körüli teret.
- ' árrés ” teret termel az elem körül.
- ' kijelző ' értékkel ' Blokk ” az elem szélességét 100%-ra állítja.
4. lépés: Stílusz „modális párbeszédes” osztályt a Fade-re
.modal .áttűnés .modal-dialog {
átalakítani : skála ( 0 ) ;
átmenet : minden 450 ms köbös-bézier ( .47 , 1.64 , .41 , .8 ) ;
}Amikor a modális elhalványul, a következő CSS-tulajdonságok kerülnek alkalmazásra a „ modális-dialógus ' osztály:
- ' átalakítani ' ingatlan a ' skála() ” érték növeli vagy csökkenti az elem méretét függőlegesen vagy vízszintesen.
- ' átmenet ” fokozatosan mozgatja az elemet. A ' cubic-bezier() ” funkció a köbös Bezier-görbét alkalmazza. Négy pont határozza meg.
5. lépés: Stílusos „modális párbeszédes” osztály a bemutatón
.modal .előadás .modal-dialog {
átalakítani : skála ( 1 ) ;
}A CSS' átalakítani ' ingatlan ' értékkel' skála (1) ” növeli a párbeszédpanel méretét.
6. lépés: Stílus „modális tartalom” osztály
.main-modal-container .modal-dialog .modal-content {
határ-sugár : 30 képpont ;
határ : egyik sem ;
túlcsordulás : rejtett ;
}A ' modális-tartalom ” a következő tulajdonságokkal díszített:
- ' határ-sugár ” lekerekíti az elem széleit.
- ' határ ' értékkel ' egyik sem ” takarja a határt.
- ' túlcsordulás ” szabályozza a tartalom áramlását.
7. lépés: stílus „bezárás” osztály
.main-modal-container .modal-dialog .modal-content .Bezárás {
szín : #747474 ;
háttérszín : rgba ( 255 , 255 , 255 , 0.5 ) ;
magasság : 27 képpont ;
szélesség : 27 képpont ;
párnázás : 0 ;
átlátszatlanság : 1 ;
túlcsordulás : rejtett ;
pozíció : abszolút ;
jobb : 15 képpont ;
tetejére : 15 képpont ;
z-index : 2 ;
}Itt:
- ' átlátszatlanság ” határozza meg az elem átlátszósági szintjét.
- ' pozíció ' értékkel ' abszolút ” beállítja az elem pozícióját a szülőpozícióhoz képest.
- ' jobb ” és „ tetejére ” állítson be helyet a bezárás gomb jobb oldalán és tetején.
- ' z-index ” határozza meg az elem veremsorrendjét. A nagyobb veremsorrend az elemet előrébb helyezi.
8. lépés: Stílus „modális test” osztály
.main-modal-container .modal-dialog .modal-content .modal-body {
párnázás : 0 !fontos ;
}A teljes modális test körüli teret a CSS szabályozza. párnázás ' ingatlan. Ráadásul a „ !fontos ” kulcsszó az elem fontosságának beállítására szolgál.
9. lépés: Az „img” elem stílusa
.main-modal-container .modal-dialog .modal-content .modal-body .modal-image img {
magasság : 100% ;
szélesség : 100% ;
}10. lépés: A „tartalom” osztály stílusának kialakítása
.main-modal-container .modal-dialog .modal-content .modal-body .tartalom {
párnázás : 35 képpont 30 képpont ;
}A „ párnázás ' tulajdonság, a hely hozzáadódik a ' tartalom ” osztály tartalma.
11. lépés: Stílus „cím” osztály
.main-modal-container .modal-dialog .modal-content .modal-body .cím {
szín : #fb3640 ;
betűtípus család : 'Sacramento' , kurzív ;
betűméret : 35 képpont ;
}Itt:
- ' betűtípus család ” határozza meg a betűtípus stílusát.
- ' betűméret ” állítja be a betűméretet.
12. lépés: Stílus „alcím” osztály
.main-modal-container .modal-dialog .modal-content .modal-body .felirat {
font-weight : 600 ;
szöveg-átalakítás : nagybetűs ;
árrés : 0 0 20 képpont ;
kijelző : Blokk ;
}A megadott kódrészlet szerint:
- ' font-weight ” állítja be a betűtípus vastagságát.
- ' szöveg-átalakítás ” állítja be a betűtípust.
Kimenet
Így alakíthatja ki a Bootstrap modált.
Következtetés
A Bootstrap modális ablak stílusához először adja hozzá azt a gombot, amely elindítja a modális ablakot. Ezután készítse el a modális ablakot HTML-elemekkel. Ezután adjon hozzá több CSS-tulajdonságot, beleértve a „ párnázás ”, „ árrés ”, „ szín ”, „ átmenet ” és még sok más a modális ablak stílusához. Pontosabban a „ köbös-bézier ” funkció az átmeneti effektus alkalmazására szolgál egy négypontos görbében a modális ablakon. Ez a bejegyzés elmagyarázza a Bootstrap modális stílusának eljárását.