Assalamu'alaikum W. W.
Abdul Hafid Gunawan - Hai Sobat setia SC Blog, Alhamdullilah sudah sampai Tutorial Bootstrap Part 24 ini, saya masih di berikan kesempatan untuk membagikan Ilmu saya ke teman" setia SC Blog.
PENGERTIAN
SleepingCodings - Modal merupakan sebuah fitur di Bootstrap yang berfungsi untuk menampilkan Menu Pop-Up.
LATAR BELAKANG
Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.
MAKSUD DAN TUJUAN
- Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.
ALAT DAN BAHAN
- Text Editor
PEMBAHASAN KETERANGAN
Keterangan :
- Class .modal digunakan untuk membuat sebuah modal.
- Class .fade digunakan untuk memberikan efek animasi fade.
- Class .modal-dialog digunakan untuk membuat modal dialog (popup)
- Class .modal-content digunakan untuk membuat konten di dalam menu popup
- Class .modal-header digunakan untuk membuat modal header
- Class .modal-body digunakan untuk membuat modal isi
- Class .modal-footer digunakan untuk membuat modal footer
- Atribut data-toggle digunakan untuk membuat button toggle yaitu show/hide kontent
- Atribut data-target digunakan untuk merujuk konten target.
- Atribut data-dismiss digunakan untuk menghapus / keluar dari popup menu modal
MEMBUAT MODAL
OPSI TAMBAHAN MODAL
- Modal Size
1. Modal Size Small
<div class="modal-dialog modal-sm"></div>
2. Modal Size Large
<div class="modal-dialog modal-lg"></div>
- Centered Modal
Modal Centered ialah sebuah Class untuk membuat text yang ada dalam menu Pop-Up Modal menjadi rata tengah. Cara Penggunaannya :
<div class="modal-dialog modal-dialog-centered"></div>
KESIMPULAN
Dengan adanya Bootstrap kita dapat membuat Modal dengan lebih mudah, tanpa harus membuat CSS + JQuerynya sendiri.
REFERENSI
- www.w3schools.com/bootstrap4/bootstrap_popover.html
Wassalamu'alaikum W. W.
No comments:
Post a Comment