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 <div> menu. Reka bentuk ringkas dan kemas yang disediakan menjadikan kumpulan butang ini kelihatan seperti menu native Android mahupun iOS.

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.

  1. Hasilkan menu Nested Group sedalam tiga lapisan.
  2. Hasilkan menu Horizontal yang mempunyai lima elemen butang
  3. 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!