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.

Mendesain Navigasi Situs dengan Bootstrap

Tampilan navigasi di desktop.

Mendesain Navigasi Situs dengan Bootstrap

Tampilan navigasi di tablet.

Detail Tutorial

Tutorial ini ditulis bagi para pemula. Oleh karena itu, tutorial ini akan cukup panjang dan mendetail. Jika Anda adalah profesional yang terlalu sibuk untuk merancang website sendiri, kami sarankan Anda untuk menggunakan jasa pembuatan website profesional dari Niagaweb.

  • 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.

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.

Mendesain Navigasi Situs dengan Bootstrap

Langkah 2

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

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

Langkah 3

Penjelasan cara membuat baris navigasi disediakan di bagian Component Navbar.

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

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

Mendesain Navigasi Situs dengan Bootstrap

Langkah 4

Kita hanya ingin mempertahankan nama situs —saat ini Brand— dan link di ujung kanan.
Mendesain Navigasi Situs dengan Bootstrap

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

Mendesain Navigasi Situs dengan Bootstrap

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

Baris navigasi akan berubah jadi gelap.

Mendesain Navigasi Situs dengan Bootstrap

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

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

Mendesain Navigasi Situs dengan Bootstrap

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

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).

Mendesain Navigasi Situs dengan Bootstrap

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.

Mendesain Navigasi Situs dengan Bootstrap

Mendesain Navigasi Situs dengan Bootstrap

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

Iklan

4 thoughts on “Membuat Navigasi Situs Responsif dengan Bootstrap

  1. min kalau ganti warna navbarnya bootstrap gimana terus saya mau pake helper ??
    mohon dibales yah thank

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s