Paparan kad Bootstrap merupakan kotak paparan dengan sempadan dan pemenuh ruang (padding) di sekeliling data. Paparan kad ini boleh diisi dengan header, footer, maklumat dan imej.

Pada minggu ini, kita akan mempelajari dua latihan berbeza.

Latihan pertama bagaimana menghasilkan paparan berbentuk kad, manakala latihan kedua pula bagaimana memaparkan lebih dari satu kad dalam paparan yang sama dengan susunan yang cantik.

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

Latihan

Langkah 1: Buka mana-mana text 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_card.html ke dalam folder Genius Corner seperti latihan terdahulu.

Langkah 3: Double-click fail tadi untuk melihat hasilnya melalui pelayar web

Langkah 4: Hasilkan fail baru menggunakan text editor anda dan tuliskan kod atur cara berikut.

Langkah 5: Simpan hasil kerja anda tadi dengan nama bootstrap_card_deck.html.

Langkah 6: Klik dua kali (Double-click) fail tadi untuk melihat hasilnya melalui pelayar sesawang (web).

SEMAKAN

MENERUSI latihan tadi, kita telah mempelajari kaedah memaparkan maklumat dan imej dalam bentuk kad nama menggunakan kelas card.

Masukkan sahaja kelas tersebut kepada <div> yang sesuai dan gunakan subkelas card-img-top, card-body, card-title serta card-text untuk susunan paparan yang lebih menarik.

Menerusi latihan kedua pula, kita telah mempelajari kaedah menyusun lebih dari satu kad nama dalam deck menggunakan kelas card-deck.

Anda hanya perlu kumpul semua <div class=card> di dalam <div class=card-deck>, selebihnya diuruskan secara automatik oleh kerangka Bootstrap.

SOALAN

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

1. Ubah gambar dan data dalam Card menggunakan maklumat anda sendiri

2. Hasilkan Deck yang mempunyai 8 Card

3. Ubah warna latar Card menggunakan kelas seperti Warning dan Success.

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 sama minggu hadapan.

Selamat mencuba!