Membuat Navigasi Situs Responsif dengan Bootstrap

Dalam mendesain halaman situs, setidaknya ada tiga elemen yang perlu Anda kuasai. HTML untuk struktur dokumen, CSS untuk mengatur tampilannya, dan JavaScript untuk menambahkan unsur interaktif. Cara lebih praktis adalah menggunakan framework yang sudah mendukung ketiganya. Dengannya, Anda bisa lebih fokus mendesain struktur situs tanpa perlu menulis semua dari awal. Bootstrap adalah salah satu framework HTML, CSS, dan JS yang sudah cukup lengkap dan populer.

Di tutorial ini, kita akan mengenal dasar-dasar penggunakan Bootstrap untuk mendesain navigasi sebuah situs. Karena secara default Bootstrap sudah mendukung tampilan responsive, secara otomatis navigasi situs yang kita buat pun akan otomatis berubah mengikuti ukuran layar yang digunakan.

Preview

Berikut adalah tampilan navigasi yang akan kita buat. Bersifat responsive untuk layar kecil seperti smartphone dan layar besar seperti desktop atau TV.



Tampilan navigasi di desktop.



Tampilan navigasi di tablet.

Detail Tutorial

Tutorial ini ditulis bagi para pemula. Oleh karena itu, tutorial ini akan cukup panjang dan mendetail.

• Tingkat Kesulitan: Pemula


• Software yang Digunakan: Notepad++


• Teknik yang Dipelajari: CSS, HTML, Bootstrap.


• Lama Pengerjaan: 30 menit

Resource yang Dibutuhkan

Untuk mengikuti tutorial ini, silakan ambil terlebih dahulu resource berikut.

• Notepad++

Tutorial

Langkah 1

Kita akan menggunakan framework Bootstrap. Penjelasan lengkap tentang Bootstrap cukup lengkap tersedia di situsnya, getbootstrap. Di bagian bawah, terdapat tombol besar untuk mendownload paket file html, css, dan javascript yang digunakan Bootstrap. Tapi, untuk mempermudah tutorial ini, kita tidak download apa pun. Kita akan langsung merujuk file ke situs Bootstrap tanpa perlu download file apa pun.

Langkah 2

Untuk memulai, buka situs bootstrap di bagian Basic Template. Di sana terdapat instruksi cara penggunaannya.



Buka Notepad++ lalu buat file baru. Copy dan paste kode yang tersedia dari situs Bootstrap. Simpan file dengan nama index.html.

Di bagian atas halaman Getting Started, terdapat informasi Bootstrap CDN. Ini digunakan jika kita ingin mengambil semua file bootsrap dari situs bootstrap. Inilah yang ingin kita lakukan sekarang. Jadi, ganti link file css dan file js ke yang ini.

Buka file HTML yang baru saja Anda buat. Hanya tersedia tulisan Hello World!. Dari sini, kita sudah bisa memahami bahwa Bootstrap sudah memiliki tampilan dasar yang cukup bagus.

Langkah 3

Penjelasan cara membuat baris navigasi disediakan di bagian Component Navbar.



Copy paste contoh html yang tersedia. Sisipkan kode html di antara tag body.

Simpan file html. Buka file di browser dan Anda akan menemukan tampilan navigasi sama persis dengan contoh di situs Bootstrap, lengkap dengan style yang cukup bagus.



Jika Anda perkecil lebar browser, akan terlihat bahwa tampilan menu berubah, menyesuaikan dengan ukurannya. Menu berubah vertikal dan tersembunyi.

Langkah 4

Kita hanya ingin mempertahankan nama situs —saat ini Brand— dan link di ujung kanan.


Hapus kode-kode HTML yang tidak digunakan lalu ubah judul situs dan tambahkan link. Berikut adalah tampilan sebelum dan setelah kode-kode HTML dihilangkan.

Langkah 5

Kita coba mengubah tampilan baris navigasi. Di bagian Inverted Nabar, tertulis bahwa kita bisa mengubah tampilan navigasi dengan menambahkan .navbar-inverse. Jadi, modifikasi kode html dengan menambahkannya.



Baris navigasi akan berubah jadi gelap.

Langkah 6

Jika diperhatikan lebih cermat. Ternyata ada lengkungan kecil di keempat pojok baris navigasi. Bootstrap, secara default, sudah menambahkan lengkungan ke dalam baris navigasi. Kita akan menghilangkan ini.



Sebelumnya, Anda harus mencari tahu posisi style css yang perlu diubah. Buka file html di Google Chrome. Klik kanan navigasi dan pilih Inspect Element. Scroll terus hingga diperoleh border-radius. Properti ini berfungsi untuk memberi pojok melengkung.



Jika style ini kita aktifkan, akan terlihat bahwa lengkungan pojok akan hilang.

Langkah 7

Buat file baru dengan nama style.css dan simpan di dalam folder bernama css. Copy style border-radius dari kotak Inspect Element dan paste ke file style.css. Ubah nilainya menjadi 0 untuk menghilangkan lengkungannya.


.navbar {
border-radius: 0px;
border: 0px;
}


Langkah 8

Untuk saat ini, style yang kita buat di dalam file css tidak akan mempengaruhi tampilan file html karena belum disambungkan. Untuk menyambungkan keduanya, tambahkan perintah link css ke dalam file html, di antara tag head.

Langkah 9

Simpan file html. Buka kembali di browser dan akan terlihat bahwa lengkungan sudah hilang. Teknik ini disebut sebagai CSS Override. Bootstrap sudah memiliki style untuk baris navigasi yaitu lengkungan di keempat pojoknya. Yang kita lakukan adalah menimpa style ini dengan menjadikannya tidak melengkung. Kita sama sekali tidak mengubah style bawaan Bootstrap, tapi menimpa (override).

Langkah 10

Sekali lagi, kita akan melakukan Override CSS dengan menambahkan latar gelap ke dalam halaman. Ambil pola dari subtlepattern. Simpan file gambar pola ke folder bernama img. Tambahkan style background-image ke dalam tag body merujuk ke link gambar tadi. Untuk jaga-jaga seandainya gambar ini tidak muncul, kita juga perlu menambahkan warna ke dalam latar. Warna yang sama dengan gambar latar, yaitu #171717.


body {
background-color: #171717;
background-image: url("../img/binding_dark.png");
}


Dalam kode css di atas, kita menambahkan .. dalam url, fungsinya untuk naik satu folder ke atas karena folder css, yaitu tempat file css ini, berada dalam level yang sama dengan folder img, tempat penyimpanan file latar.

Hasil Akhir

Inilah hasil akhir yang kita peroleh. Lihat hasilnya dalam file zip.





Tutorial ini sangat sederhana dan hanya mengenalkan dasar-dasar HTML, CSS, dan Bootstrap. Kami berharap memiliki cukup waktu luang untuk membuat tutorial lebih lengkap cara membuat satu halaman situs dengan Bootstrap. Terima kasih telah membaca tutorial ini.

Download File

Download File HTML & CSS