Salam ceria buat semua pembaca budiman. Kita bertemu kembali dalam ruangan Genius Corner minggu ini, bersama latihan Bootstrap bahagian sembilan. Dalam latihan kali ini, kita akan pelajari kaedah memaparkan maklumat yang boleh disembunyikan dengan kelas Collapsible.
Kelas Collapsible digunakan untuk menyembunyikan maklumat daripada paparan sehinggalah ia diaktifkan menggunakan butang. Kaedah ini membolehkan paparan anda kelihatan bersih dan kemas.
Kaedah ini juga membenarkan pengunjung membaca kandungan panjang tanpa perlu scroll ke atas dan ke bawah.
Kelas ini secara asalnya dicipta dengan tujuan menghasilkan menu yang boleh disembunyikan sama ada pada ruangan atas atau sisi paparan laman sesawang (web). Dengan perkembangan teknologi, bukan hanya teks, malah video dan imej juga boleh dimanipulasikan.
Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.
Semakan
Menerusi latihan tadi, kita telah mepelajari kaedah memaparkan menyembunyikan maklumat seperti teks, video dan imej menggunakan kelas collapsible. Masukkan sahaja kelas tersebut kepada
Kelas data toggle pula digunakan untuk mengaktifkan kelas utama collapsible sama ada memaparkan atau menyembunyikan. Jika pengguna menekan butang pemula ketika maklumat tersembunyi, maklumat tadi akan dipaparkan dan sebaliknya.
Soalan
Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.
1. Tambah satu imej ke dalam Collapsible pertama
2. Ubah warna latar Collapsible kedua
3. Masukkan imej atau video ke dalam kandungan dan cuba papar atau sembunyi.
Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen di www.farizgaskin.com dan kami akan cuba jawab sepantas mungkin.
Sehingga bertemu lagi dalam ruangan yang sama minggu hadapan, selamat mencuba!
Tidak mahu terlepas? Ikuti kami di
BERITA BERKAITAN
Jerebu: Syarikat Malaysia tidak terbabit pembakaran
Sup tulang rawan berempah
Pemain tenis Serbia ‘digam’ 24 tahun kerana atur perlawanan
