SALAM ceria buat semua pembaca budiman. Kita bertemu kembali dalam ruangan Genius Corner minggu ini, bersama latihan Bootstrap bahagian kelima. Dalam latihan kali ini, kita akan mempelajari kaedah menggunakan beberapa elemen butang yang berbeza dalam laman sesawang anda.
Elemen butang membolehkan pengguna berinteraksi dengan laman sesawang (web) atau aplikasi anda. Kebiasaannya, proses mereka bentuk butang yang sesuai dengan antara muka laman sesawang anda mengambil tempoh yang agak lama.
Dengan bootstrap, elemen butang boleh disusun secara berkumpulan dengan sangat mudah. Anda hanya perlu memasukkan kelas btn-group ke dalam elemen
Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.
Latihan
LANGKAH 1: Buka mana-mana teks editor yang anda miliki seperti Atom, Notepad atau Sublime dan tuliskan kod atur cara berikut.
LANGKAH 2: Simpan (Save) hasil kerja anda tadi dengan nama bootstrap_button_group.html ke dalam folder Genius Corner seperti latihan terdahulu.
LANGKAH 3: Klik dua kali (double-click) fail tadi untuk melihat hasilnya melalui pelayar sesawang.
Semakan
MENERUSI latihan tadi, kita telah pelajari kaedah untuk menampilkan menu yang sesuai, berdasarkan antara muka laman sesawang atau aplikasi yang berbeza dari segi ukuran ketinggian dan kelebaran.
Bagi memaparkan menu yang melebar, kelas btn-group sesuai digunakan. Bagi paparan yang meninggi, kelas btn-group-vertical adalah lebih sesuai.
Sekiranya terdapat elemen menu yang agak banyak, kelas dropdown-toggle digunakan bagi meringkaskan paparan menu dengan mengumpulkan menu daripada kumpulan yang sama ke dalam satu butang menu utama.
Soalan
SEBELUM ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.
- Hasilkan menu Nested Group sedalam tiga lapisan.
- Hasilkan menu Horizontal yang mempunyai lima elemen butang
- Hasilkan menu Vertical dengan Nested Group sedalam dua lapisan
Jika anda mempunyai sebarang pertanyaan atau cadangan, sila tinggalkan komen anda 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
PERMIM cadang lantik wakil khas tangani isu India Muslim
Helikopter perkhidmatan doktor udara terhempas di Long Lellang, Sarawak
HALIMAH ABDUL AZIZ
