Tulisan ini akan menerangkan cara menggayakan modal Bootstrap.
Bagaimana untuk Menggayakan modal Bootstrap?
Untuk mengetahui cara menggayakan modal Bootstrap, ikut langkah di bawah.
Langkah 1: Buat Fail HTML
Pertama, buat modal dengan mengikuti arahan yang diberikan di bawah:
- Buat ' ” bekas dan berikannya kelas “ bekas-modal-utama ”.
- Kemudian, tambahkan butang yang akan mencetuskan tetingkap modal. Tetapkan ia ' btn ”, “ btn-utama ”, dan “ modal tunjuk ” kelas. Tetapkan atribut data ' togol data 'dengan nilai' modal ' dan juga ' sasaran data ' dengan ' #myModal ” nilai. Id ini menunjuk ke id tetingkap modal.
- Seterusnya, buat tetingkap modal. Untuk berbuat demikian, tambahkan “
'elemen dan berikannya' modal ” dan “ pudar ” kelas, dan tetapkan id.- Tambahkan '
' untuk kotak dialog modal dan tetapkan ' dialog-modal ” kelas.- Kemudian, tentukan kandungan modal dalam '
' dan tetapkan kelas ' kandungan modal ”.- Buat butang tutup dengan kelas ' dekat ”. ' data-buang ” atribut digunakan untuk menutup tetingkap modal.
- Kemudian, tentukan badan modal dengan kelas ' badan modal ” dan “ barisan ”. Di dalamnya, ambil lajur 6 grid untuk imej dan 6 untuk kandungan.
- Imej itu dibenamkan menggunakan '
” tag.
- Kemudian, di dalam '
'elemen dengan ' kandungan ” kelas, tambahkan tajuk, sari kata dan huraian.- Selepas itu, letakkan butang dengan Bootstrap “ btn ”, “ btn-bahaya ”, dan “ p-2 ” kelas:
< div kelas = 'bekas modal-utama' >
< butang kelas = 'btn btn-modal pertunjukan utama' togol data = 'modal' data- sasaran = '#myModal' > lihat modal < / butang >
< div kelas = 'modal pudar' ID = 'myModal' >
< div kelas = 'dialog modal' >
< div kelas = 'kandungan modal' >
< butang kelas = 'tutup' data-buang = 'modal' >
< rentang > × < / rentang >< / butang >
< div kelas = 'baris modal-badan' >
< div kelas = 'imej modal col-sm-6' >< img src = '/img/clothes.jpg' >< / div >
< div kelas = 'kandungan col-sm-6' >
< h3 kelas = 'tajuk' > Tawaran istimewa < / h3 >
< rentang kelas = 'sub-tajuk' > Diskaun 20% untuk bawa pulang dan penghantaran < / rentang >
< hlm kelas = 'penerangan' > Kualiti baju terbaik. Setiap saiz ada. Mudah dibasuh. < / hlm >
< butang kelas = 'btn btn-bahaya p-2' > LIHAT LEBIH LANJUT < / butang >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Langkah 2: Gayakan Kelas 'modal-bekas utama'.
Keseluruhan bekas digayakan dengan CSS “ font-family ” harta:
.bekas-modal-utama {
font-family : 'Poppins' , sans serif ;
}Langkah 3: Gayakan Kelas 'show-modal'.
' modal tunjuk ” kelas diisytiharkan dengan sifat berikut:
.bekas-modal-utama .show-modal {
warna : #F F F ;
warna latar belakang : #3a97c9 ;
teks-transformasi : bermodalkan ;
padding : 10px 15px ;
margin : 80px auto 0 ;
paparan : blok ;
}di sini:
- “ warna ” menetapkan warna fon.
- “ warna latar belakang ” menetapkan warna latar belakang elemen.
- “ teks-transformasi ” menggunakan huruf besar pada teks.
- “ padding ” melaraskan ruang di sekeliling kandungan elemen.
- “ margin ” menghasilkan ruang di sekeliling unsur.
- “ paparan 'dengan nilai' blok ” menetapkan lebar elemen kepada 100%.
Langkah 4: Gayakan Kelas 'modal-dialog' pada Fade
.modal .pudar .modal-dialog {
mengubah : skala ( 0 ) ;
peralihan : semua 450ms cubic-bezier ( .47 , 1.64 , .41 , .8 ) ;
}Apabila modal pudar, sifat CSS berikut digunakan pada “ dialog-modal ” kelas:
- “ mengubah ” harta dengan “ skala() nilai ” menambah atau mengurangkan saiz elemen secara menegak atau mendatar.
- “ peralihan ” secara beransur-ansur menggerakkan elemen. ' cubic-bezier() fungsi ” menggunakan lengkung bezier padu. Ia ditentukan oleh empat mata.
Langkah 5: Gayakan Kelas 'modal-dialog' pada Paparan
.modal .tunjukkan .modal-dialog {
mengubah : skala ( 1 ) ;
}CSS ' mengubah ” harta dengan nilai “ skala(1) ” menambah saiz kotak dialog.
Langkah 6: Gayakan Kelas 'modal-kandungan'.
.bekas-modal-utama .modal-dialog .modal-kandungan {
jejari sempadan : 30px ;
sempadan : tiada ;
melimpah : tersembunyi ;
}' kandungan modal ” dihiasi dengan ciri-ciri berikut:
- “ jejari sempadan ” membulatkan tepi elemen.
- “ sempadan 'dengan nilai' tiada ” menyembunyikan sempadan.
- “ melimpah ” mengawal aliran kandungan.
Langkah 7: Gayakan Kelas 'tutup'.
.bekas-modal-utama .modal-dialog .modal-kandungan .tutup {
warna : #747474 ;
warna latar belakang : rgba ( 255 , 255 , 255 , 0.5 ) ;
ketinggian : 27px ;
lebar : 27px ;
padding : 0 ;
kelegapan : 1 ;
melimpah : tersembunyi ;
kedudukan : mutlak ;
betul : 15px ;
atas : 15px ;
indeks-z : 2 ;
}di sini:
- “ kelegapan ” mentakrifkan tahap ketelusan elemen.
- “ kedudukan 'dengan nilai' mutlak ” menetapkan kedudukan elemen berbanding kedudukan induknya.
- “ betul ” dan “ atas ” tetapkan ruang di sebelah kanan dan atas butang tutup.
- “ indeks-z ” menentukan susunan tindanan elemen. Susunan tindanan yang lebih besar membawa elemen ke hadapan.
Langkah 8: Gayakan Kelas 'modal-body'.
.bekas-modal-utama .modal-dialog .modal-kandungan .modal-body {
padding : 0 !penting ;
}Ruang di sekeliling seluruh badan modal dilaraskan oleh CSS “ padding ” harta benda. Selain itu, ' !penting ” kata kunci digunakan untuk menetapkan kepentingan elemen.
Langkah 9: Gaya Elemen 'img'.
.bekas-modal-utama .modal-dialog .modal-kandungan .modal-body .imej modal img {
ketinggian : 100% ;
lebar : 100% ;
}Langkah 10: Gayakan Kelas 'kandungan'.
.bekas-modal-utama .modal-dialog .modal-kandungan .modal-body .kandungan {
padding : 35px 30px ;
}Dengan menggunakan ' padding ” harta benda, ruang ditambah di sekeliling “ kandungan ” kandungan kelas.
Langkah 11: Gaya Kelas 'tajuk'.
.bekas-modal-utama .modal-dialog .modal-kandungan .modal-body .tajuk {
warna : #fb3640 ;
font-family : 'Sacramento' , kursif ;
Saiz huruf : 35px ;
}di sini:
- “ font-family ” mentakrifkan gaya fon.
- “ Saiz huruf ” menetapkan saiz fon.
Langkah 12: Gaya Kelas 'sub-tajuk'.
.bekas-modal-utama .modal-dialog .modal-kandungan .modal-body .sub-tajuk {
berat fon : 600 ;
teks-transformasi : huruf besar ;
margin : 0 0 20px ;
paparan : blok ;
}Mengikut coretan kod yang diberikan:
- “ berat fon ” menetapkan ketebalan fon.
- “ teks-transformasi ” menetapkan sarung fon.
Pengeluaran
Inilah cara anda boleh menggayakan modal Bootstrap.
Kesimpulan
Untuk menggayakan tetingkap modal Bootstrap, pertama, tambahkan butang yang akan mencetuskan modal. Kemudian, buat tetingkap modal menggunakan elemen HTML. Selepas itu, tambahkan beberapa sifat CSS, termasuk “ padding ”, “ margin ”, “ warna ”, “ peralihan ”, dan banyak lagi untuk menggayakan tetingkap modal. Lebih khusus lagi, ' cubic-bezier Fungsi ” digunakan untuk menggunakan kesan peralihan dalam lengkung empat mata pada tetingkap modal. Siaran ini telah menerangkan prosedur untuk menggayakan modal Bootstrap.