Artikel ini akan menjelaskan cara menata modal Bootstrap.
Bagaimana Cara Menata Modal Bootstrap?
Untuk mempelajari cara menata modal Bootstrap, ikuti langkah-langkah di bawah ini.
Langkah 1: Buat File HTML
Pertama, buat modal dengan mengikuti petunjuk yang diberikan di bawah ini:
- Membuat ' ” wadah dan tetapkan kelas “ main-modal-container ”.
- Kemudian, tambahkan tombol yang akan memicu jendela modal. Tetapkan ' btn ”, “ btn-primary ', Dan ' show-modal ” kelas. Tetapkan atribut data “ data-toggle ” dengan nilai “ modal ” dan “ data-target ' dengan ' #myModal ' nilai. Id ini menunjuk ke id jendela modal.
- Selanjutnya, buat jendela modal. Untuk melakukannya, tambahkan “
' elemen dan tetapkan ' modal ' Dan ' memudar ”, dan atur id.- Tambah sebuah '
” untuk kotak dialog modal dan tetapkan “ modal-dialog ' kelas.- Kemudian, tentukan konten modal dalam '
' dan tetapkan kelas ' modal-konten ”.- Buat tombol tutup dengan kelas “ menutup ”. “ data-dismiss Atribut ” digunakan untuk menutup jendela modal.
- Kemudian, tentukan badan modal dengan kelas ' modal-tubuh ' Dan ' baris ”. Di dalamnya, ambil kolom 6 kisi untuk gambar dan 6 untuk konten.
- Gambar disematkan menggunakan '
” tag.
- Kemudian, di dalam '
elemen ” dengan “ isi ”, tambahkan judul, subjudul, dan deskripsi.- Setelah itu, tempatkan tombol dengan Bootstrap “ btn ”, “ btn-bahaya ', Dan ' p-2 ” kelas:
< div kelas = 'wadah-modal-utama' >
< tombol kelas = 'btn btn-modal pertunjukan utama' data-toggle = 'modal' data- target = '#myModal' > melihat modal < / tombol >
< div kelas = 'modal memudar' pengenal = 'Modal saya' >
< div kelas = 'modal-dialog' >
< div kelas = 'modal-konten' >
< tombol kelas = 'menutup' data-dismiss = 'modal' >
< menjangkau > × < / menjangkau >< / tombol >
< div kelas = 'baris modal-tubuh' >
< div kelas = 'col-sm-6 modal-image' >< img src = '/img/pakaian.jpg' >< / div >
< div kelas = 'isi col-sm-6' >
< h3 kelas = 'judul' > Penawaran istimewa < / h3 >
< menjangkau kelas = 'sub judul' > Diskon 20% untuk bawa pulang dan pesan antar < / menjangkau >
< P kelas = 'keterangan' > Kaos kualitas terbaik. Setiap ukuran tersedia. Mudah dicuci. < / P >
< tombol kelas = 'btn btn-bahaya p-2' > LIHAT LEBIH BANYAK < / tombol >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >Langkah 2: Style Kelas “main-modal-container”.
Seluruh wadah ditata dengan CSS “ font-family ' Properti:
.main-modal-container {
font-family : 'Poppin' , Sans Serif ;
}Langkah 3: Gaya Kelas 'show-modal'.
“ show-modal ” kelas dideklarasikan dengan properti berikut:
.main-modal-container .show-modal {
warna : #fff ;
warna latar belakang : #3a97c9 ;
transformasi teks : memanfaatkan ;
lapisan : 10px 15px ;
batas : 80px mobil 0 ;
menampilkan : memblokir ;
}Di Sini:
- “ warna ” mengatur warna font.
- “ warna latar belakang ” mengatur warna latar belakang elemen.
- “ transformasi teks ” mengkapitalkan teks.
- “ lapisan ” menyesuaikan ruang di sekitar konten elemen.
- “ batas ” menghasilkan ruang di sekitar elemen.
- “ menampilkan ” dengan nilai “ memblokir ” menyetel lebar elemen menjadi 100%.
Langkah 4: Gaya Kelas 'modal-dialog' pada Fade
.modal .memudar .modal-dialog {
mengubah : skala ( 0 ) ;
transisi : semua 450 md kubik-bezier ( .47 , 1.64 , .41 , .8 ) ;
}Saat modal memudar, properti CSS berikut diterapkan ke ' modal-dialog ' kelas:
- “ mengubah ” properti dengan “ skala() ” nilai menambah atau mengurangi ukuran elemen secara vertikal atau horizontal.
- “ transisi ” secara bertahap menggerakkan elemen. “ kubik-bezier() ” fungsi menerapkan kurva bezier kubik. Itu ditentukan oleh empat poin.
Langkah 5: Style Kelas “modal-dialog” di Show
.modal .menunjukkan .modal-dialog {
mengubah : skala ( 1 ) ;
}CSS “ mengubah ” properti dengan nilai “ skala(1) ” meningkatkan ukuran kotak dialog.
Langkah 6: Style Kelas “modal-content”.
.main-modal-container .modal-dialog .modal-konten {
radius perbatasan : 30px ;
berbatasan : tidak ada ;
meluap : tersembunyi ;
}“ modal-konten ” dihiasi dengan properti berikut:
- “ radius perbatasan ” membulatkan tepi elemen.
- “ berbatasan ” dengan nilai “ tidak ada ” menyembunyikan perbatasan.
- “ meluap ” mengontrol alur konten.
Langkah 7: Style “close” Class
.main-modal-container .modal-dialog .modal-konten .menutup {
warna : #747474 ;
warna latar belakang : rgba ( 255 , 255 , 255 , 0,5 ) ;
tinggi : 27px ;
lebar : 27px ;
lapisan : 0 ;
kegelapan : 1 ;
meluap : tersembunyi ;
posisi : mutlak ;
Kanan : 15px ;
atas : 15px ;
z-index : 2 ;
}Di Sini:
- “ kegelapan ” menentukan tingkat transparansi elemen.
- “ posisi ” dengan nilai “ mutlak ” mengatur posisi elemen relatif terhadap posisi induknya.
- “ Kanan ' Dan ' atas ” atur spasi di kanan dan atas tombol tutup.
- “ z-index ” menentukan urutan tumpukan elemen. Urutan tumpukan yang lebih besar membawa elemen ke depan.
Langkah 8: Gaya Kelas 'modal-body'.
.main-modal-container .modal-dialog .modal-konten .modal-tubuh {
lapisan : 0 !penting ;
}Ruang di sekitar seluruh badan modal disesuaikan dengan CSS “ lapisan ' Properti. Selain itu, “ !penting ” kata kunci digunakan untuk mengatur kepentingan elemen.
Langkah 9: Gaya Elemen 'img'.
.main-modal-container .modal-dialog .modal-konten .modal-tubuh .modal-gambar img {
tinggi : 100% ;
lebar : 100% ;
}Langkah 10: Beri gaya Kelas 'konten'.
.main-modal-container .modal-dialog .modal-konten .modal-tubuh .isi {
lapisan : 35px 30px ;
}Dengan menggunakan “ lapisan ”, ruang ditambahkan di sekitar properti “ isi ” konten kelas.
Langkah 11: Gaya Kelas 'judul'.
.main-modal-container .modal-dialog .modal-konten .modal-tubuh .judul {
warna : #fb3640 ;
font-family : 'Sacramento' , kursif ;
ukuran huruf : 35px ;
}Di Sini:
- “ font-family ” mendefinisikan gaya font.
- “ ukuran huruf ” mengatur ukuran font.
Langkah 12: Gaya Kelas 'sub-judul'.
.main-modal-container .modal-dialog .modal-konten .modal-tubuh .sub-judul {
font-berat : 600 ;
transformasi teks : huruf besar ;
batas : 0 0 20px ;
menampilkan : memblokir ;
}Menurut potongan kode yang diberikan:
- “ font-berat ” mengatur ketebalan font.
- “ transformasi teks ” menyetel huruf besar-kecil.
Keluaran
Ini adalah bagaimana Anda dapat menata modal Bootstrap.
Kesimpulan
Untuk menata jendela modal Bootstrap, pertama, tambahkan tombol yang akan memicu modal. Kemudian, buat jendela modal menggunakan elemen HTML. Setelah itu, tambahkan beberapa properti CSS, antara lain “ lapisan ”, “ batas ”, “ warna ”, “ transisi ”, dan banyak lagi untuk menata jendela modal. Lebih khusus lagi, “ kubik-bezier ” digunakan untuk menerapkan efek transisi dalam kurva empat titik pada jendela modal. Posting ini telah menjelaskan prosedur untuk menata modal Bootstrap.