Penanda aras dengan Bootstrap - Utusan Malaysia

Penanda aras 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 di dalam ruangan Genius Corner minggu ini, bersama latihan Bootstrap bahagian keenam. Dalam latihan kali ini, kita akan mempelajari kaedah memaparkan beberapa jenis penanda aras berbeza bagi menggambarkan status kemajuan sesebuah laman sesawang (web) yang dilawati pengunjung.

Penanda aras progress bar merupakan elemen kawalan grafik yang digunakan untuk menunjukkan tahap kemajuan proses operasi komputer seperti muat turun, pemindahan fail, atau pemasangan perisian. Adakalanya, penanda aras ini digabungkan dengan paparan teks bagi menggambarkan peratusan kemajuan.

Menerusi perpustakaan terbina dalam Bootstrap, terdapat pelbagai pilihan penanda aras yang boleh dipilih oleh pengatur cara.

Memuatkan artikel berkaitan…

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

1

2

Semakan

Berdasarkan latihan tadi, kita telah mempelajari kaedah untuk menggunakan pelbagai jenis penanda aras di dalam laman sesawang sesuai dengan keperluan tertentu.

Bagi menghasilkan progress bar asas, anda memerlukan

utama yang ditandakan dengan kelas progress, serta

susulan yang ditandakan dengan kelas progress-bar.

Menggunakan library terbina dalam, pengatur cara hanya perlu menambah kelas tertentu kepada kelas asas untuk menghasilkan efek yang lebih menarik.

Contohnya, bagi memaparkan penanda aras berwarna hijau, hanya tambah kelas bg-success ke dalam kelas progress-bar.

Untuk menghasilkan penanda aras beranimasi, hanya tambahkan kelas progress-bar-animated ke dalam kelas tadi.

Soalan

Sebelum ruangan minggu ini ditamatkan, anda perlu menyelesaikan beberapa soalan latihan.

1. Hasilkan lima striped progress bar dengan warna berbeza.

2. Hasilkan tiga progress bar asas dengan ketinggian berbeza

3. Hasilkan dua progress bar beranimasi dengan kelajuan animasi berbeza.

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

Terkini