Tab dengan bootstrap - Utusan Malaysia

Tab dengan bootstrap

Share on facebook
Share on twitter
Share on whatsapp
Share on email
Share on telegram

SALAM ceria buat semua pembaca budiman. Kita bertemu kembali dalam ruangan Genius Corner minggu ini bersama latihan bootstrap bahagian 12. Pada latihan kali ini kita akan pelajari kaedah memaparkan maklumat dalam bentuk tab.

Tab merupakan elemen UI yang boleh ditekan oleh pengguna, direka untuk kelihatan seperti cebisan label pada folder kad manila yang biasa diguna di pejabat kerajaan. Elemen ini biasanya disusun secara mendatar yang membolehkan pengguna berpindah dari satu laman web ke laman yang lain tanpa memuat semula kandungan simpanan sementara sesebuah pelayar Internet.

Artikel kali ini juga merupakan latihan terakhir untuk topik bootstrap. Bermula Januari tahun depan, kami akan tampilkan topik baharu yang amat menarik dan sesuai dengan perkembangan dunia teknologi maklumat.

Tanpa membuang masa, mari kita teruskan dengan latihan minggu ini.

LANGKAH 1: Buka mana-mana text editor yang anda miliki seperti atom, notepad atau sublime dan tuliskan kod aturcara berikut.

LANGKAH 2: Save hasil kerja anda tadi dengan nama bootstrap-tab.html ke dalam folder Genius Corner seperti latihan terdahulu.

LANGKAH 3: Klik dua kali fail tadi untuk melihat hasilnya melalui pelayar web

RAJAH 1: Hasil paparan tab menggunakan gabungan bootstrap dan jQuery.

SEMAKAN

Pada latihan tadi, kita telah mempelajari kaedah memaparkan maklumat berbentuk tab. Setiap helaian tab mengandungi maklumat berbeza apabila dipilih. Pada masa sama, kandungan di dalam tab yang lain diselindungkan daripada pandangan.

Bagi mendapatkan hasil terbaik merentas pelayar internet yang berbeza jenis, elemen tab bootstrap yang dipanggil menggunakan

Tidak mahu terlepas? Ikuti kami di

 

BERITA BERKAITAN