Jumbotron secara asasnya merupakan ruangan besar yang digunakan untuk memaparkan beberapa imej secara bergilir di laman sesawang anda. Elemen ini merupakan objek pertama yang dilihat oleh pengunjung apabila tiba di sesebuah laman sesawang.

Sebelum ini, elemen slider CSS dan JavaScript digunakan untuk fungsi yang sama. Namun, kehadiran Jumbotron sebagai elemen Bootstrap terbina dalam telah meringankan lagi penggunaan Random Access Memory (RAM) dan unit pemprosesan pusat (CPU) bagi tujuan yang sama.

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_jumbotron.html ke dalam folder Genius Corner seperti latihan terdahulu.

LANGKAH 3:

KLIK DUA KALI (Double-click) fail tadi untuk melihat hasilnya melalui pelayar web.

SEMAKAN

MENERUSI latihan tadi, kita telah pelajari kaedah untuk memaparkan imej dan video di paparan utama laman web menggunakan elemen Jumbotron. Elemen <div> yang ingin dijadikan paparan utama hanya perlu ditambah kelas jumbotron. Bagi paparan penuh dari penjuru ke penjuru skrin komputer atau peranti mudah alih, anda cuma perlu tambah kelas jumbotron-fluid bersama kelas jumbotron tadi.

Di dalam bahagian <head> pula, jangan lupa tambah rujukan ke bootstrap.min.js, jquery.min.js, popper.min.js dan bootstrap.min.js. Untuk pengetahuan anda, singkatan min pada setiap fail rujukan JavaScript membawa maksud minified. Fail rujukan minified ini telah dipadatkan dan tidak mampu dibaca oleh manusia. Tujuannya agar laman sesawang (web) anda dimuatkan ke paparan pelayar web dengan lebih pantas dan lebih ringan berbanding penggunaan fail rujukan JavaScript biasa.

SOALAN

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

  1. Paparkan video dalam elemen Jumbotron
  2. Paparkan imej SVG dalam elemen Jumbotron
  3. Paparkan elemen Jumbotron dengan saiz lebih kecil

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!