Tutorial Desain Web Responsif dengan Bootstrap (Bagian 3) - Pengantar Bar Navigasi

Minggu, 21 Mei 2017 14:03:57 ,Oleh ,Dilihat : 120 x

Diasuh oleh Dr. Ir. Agus Wibowo, M.Kom, M.Si, M.M.

       Pada bagian ini kita akan mempelajari sekilas tentang dasar bar navigasi menggunakan HTML 5, CSS 3 dan JQuery yang merupakan inti dari framework Bootstrap. Framework Bootstrap menggunakan elemen HTML, JQuery serta properti CSS yang memerlukan DOCTYPE HTML5. Untuk editor akan digunakan Notepad ++ dengan tujuan agar Anda lebih memahami detil dari kode di HTML 5. Setelah Anda mengetahui sedikit penulisan kode HTML 5, tutorial akan kita lanjutkan menggunakan Dreamweaver CC. Berikut penjelasannya.
1. Format HTML 5
       Untuk membuat dokumen HTML versi 5.0, Bootstrap selalu menyertakan kode <!DOCTYPE html> di awal halaman sebagai penanda bahwa dokumen HTML yang dibuat adalah format HTML 5, bersama dengan atribut bahasa lang="en" dan pengaturan karakter yang benar charset="utf-8":

<!DOCTYPE html>
<html lang="en">
     <head>
           <meta charset="utf-8">
    </head>
</html>

2. Mode Responsif
       Versi Bootstrap 3 dan di atasnya dirancang untuk tampil responsif terhadap perangkat mobile. Tampilan Web versi mobile akan pertama kali ditampilkan ketika pengunjung melihat halaman web melalui browser. Untuk memastikan rendering serta skala pembesaran dengan benar, pada kode dokumen HTML 5 akan ditambahkan tag <meta> berikut di dalam elemen <head> </head>:

<meta name="viewport" content="width=device-width, initial-scale=1">

       Bagian width = device-width mengatur lebar halaman agar mengikuti lebar layar pada perangkat (dimana akan bervariasi tergantung pada perangkat seperti PC, Laptop, smartphone, tablet).

       Bagian skala awal = 1 (initial-scale=1) berfungsi untuk menetapkan tingkat pembesaran awal yaitu sebesar 1 kali, saat halaman pertama kali dimuat oleh browser.

3. Kontainer
Bootstrap juga membutuhkan elemen yang mengandung elemen untuk membungkus isi situs. Ada dua kelas kontainer yang bisa dipilih:
1. Kelas .container menyediakan container dengan lebar yang tetap responsif
2. Kelas .container-fluid menyediakan container dengan lebar yang penuh, di mana mencakup seluruh lebar area tampilan web.

Catatan: Anda tidak bisa memasukkan kontainer ke dalam kontainer yang lainnya.

4. Bar Navigasi
Sebuah bar navigasi adalah header navigasi yang ditempatkan di bagian atas halaman. Dengan Bootstrap, bilah navigasi dapat meluas atau runtuh, tergantung pada ukuran layar.

Latihan membuat menu navigasi bar dasar (basic navbar) :
Bilah navigasi standar dibuat dengan menambahkan kode :
<nav class = "navbar navbar-default">.
Contoh berikut menunjukkan cara menambahkan bilah navigasi ke bagian atas halaman:

Kode utama dari bar navigasi dasar :

Langkah pembuatan menu navbar dasar :

1. Buat folder bernama navigasi, kemudian salin folder css, fonts serta js yang diperoleh dari hasil ekstrak file bootstrap-3.3.7 yang sudah Anda unduh sebelumnya. Jika belum Anda dapat mengunduh melalui tautan berikut :

https://drive.google.com/file/d/0B0nE7j_pjv62UXA5M1FBSGg2Rlk/view?usp=sharing

2. Salin file JQuery ke folder /navigasi/js

File JQuery ini dapat Anda unduh pada tautan berikut :

https://drive.google.com/file/d/0B0nE7j_pjv62WXdTcGxSSHVnalE/view?usp=sharing

3. Salin kode di bawah ini ke dalam notepad ++, notepad ++ dapat Anda unduh menggunakan tautan berikut :

https://notepad-plus-plus.org/download/v7.4.1.html

4.  Buatlah file html yang baru menggunakan Notepad ++, kemudian simpan dengan nama navigasi1.html kedalam folder sebagai contoh bernama navigasi.

5. Tampilkan menggunakan menggunakan browser Firefox, gunakan preview Developer mode Responsive Design Mode. Coba atur simulasi preview di smartphone dengan resolusi 320x480, kemudian geser menu scroll ke bawah. Menu navigasi akan bergeser ke atas (tersembunyi ketika tombol scroll digeser ke bawah). Mengapa? Karena menu navigasi tidak menggunakan kelas Fixed Navigation Bar (.navbar-fixed-top)





TOP