Membuat Website Bootstrap 100% Responsive – Part 1 / 10
Template HTML Responsive di Semua Perangkat
Untuk membuat situs web memerlukan proses, begitu juga dengan tutorialnya. Tutorial membuat website reponsive menggunakan Bootstrap dimulai dari part 1 ini dan berakhir di part 10, pada dasarnya membuat website responsive dengan Bootstrap terbilang mudah dengan syarat harus mengetahui class–class yang sudah disediakan Bootstrap beserta fungsinya.
Sebelumnya saya pernah buatkan tutorial membuat website menggunakan HTML CSS part 1 sampai part 11, silahkan dilihat terlebh dahulu untuk memami tag-tag HTML. Kalo sudah paham mari lanjutkan menggunakan Bootstrap, kalo mau tau “Apa Itu Bootstrap” silahkan klik disini.
Mempersiapkan Bootstrap
Pertama, silahkan download Bootstrapnya terlebih dahulu di getbootstrap.com.
- Klik tombol Download Bootstrap untuk mulai mengunduh bukan Download Source ataupun Download Sass.
- Setelah berhasil di unduh silahkan extract file nya maka akan muncul folder Bootstrap + versinya (misalnya Bootstrap-3.3.1).
- Buka folder Bootstrap tersebut didalamnya ada folder CSS, JS dan Fonts, copy semua folder lalu tempelkan dimana kalian ingin memulai project pembuatan web Bootstrap ini.
Misalnya saya membuat project web ini di folder “Tutorial Web Bootstrap” maka copy 3 folder tadi dan paste didalam folder “Tutorial Web Bootstrap” ini, selesai ! Selanjutnya kita mulai membuat websitenya.
Baca Juga:
Silahkan buka code editor yang ingin digunakan, misalnya Sublime Text atau Adobe Dreamweaver. Silahkan buat file baru dengan ekstensi file .html untuk halaman beranda / home misalnya home.html atau lebih populer index.html. Simpan file index.html ini di dalam folder project “Tutorial Web Bootstrap” tadi (sejajar dengan folder-folder Bootstrap yang di paste).
Nah, didalam file index.html ini mulailah membangun struktur situs web HTML seperti biasa. Saya anggap kalian sudah memahami pola HTML makanya ingin membuat web menggunakan framework Bootstrap, kalo belum tau struktur dasar HTML bisa lihat disini atau lihat tutorial membuat web HTML CSS sederhana dari part 1 sampai part 11.
Jika ingin menggunakan framework Bootstrap, kita perlu memanggil source Bootstrap yang tadi sudah di paste. Silahkan panggil file bootstrap.min.css (di folder CSS Bootstrap) didalam bagian <head> menggunakan tag <link> seperti biasa ketika kalian memanggil source file. Kalo belum tau cara memanggil file kedalam HTML, silahkan lihat disini caranya.
Sebelum lanjut lebih jauh, silahkan copy code berikut dan tempelkan didalam tag <head>:
<meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
Untuk membuat index.html ini benar-benar responsive, code tersebut harus diletakkan tepat setelah <head> karena harus dipanggil lebih awal dibanding code-code source lain.
Selanjutnya, supaya index.html ini bersahabat baik dengan browser Internet Explorer silahkan tambahkan kode berikut (berupa comment HTML) sebelum tag penutup </head>:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
Bisa diperhatikan source nya berupa link artinya memerlukan koneksi internet, jika ingin digunakan di direktori lokal / offline untuk Internet Explorer silahkan kunjungi link yang ada di src=”link” kemudian copy semua isinya dan simpan sebagai file .js. Setelah itu tinggal diganti deh src=”” nya dengan nama file dan direktori dimana kalian menyimpannya. Kalo kurang paham, abaikan saja ini bukan hal yang penting untuk dibahas saat ini.
Sampai sini, bagian <head> file index.html akan terlihat seperti ini:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Web Responsive Bootstrap - Rio Bermano</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
Apakah sekarang Bootstrap sudah bisa digunakan ? Belum ! Masih ada 2 hal lagi yang perlu dilakukan supaya Bootstrap bisa berfungsi, silahkan masukkan code/ script jQuery <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>dari perpustakaan API Google tempelkan di sebelum tag penutup </body>.
Berikutnya silahkan panggil file bootstrap.min.js yang ada didalam folder JS Bootstrap tadi di bagian bawah sebelum tag penutup </body> juga. Maka sekarang file index.html akan terlihat seperti ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tutorial Web Responsive Bootstrap - Rio Bermano</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Perhatikan pada jquery Google API, ini berupa link yang tentu memerlukan koneksi internet. Jika ingin menggunakannya offline silahkan kunjungi link tersebut lalu copy semua codenya dan tempelkan di file baru kemudian save dan beri nama sesuai keinginan dengan ekstensi file .js. Setelah itu ganti link didalam src=”” nya dengan nama file .js yang baru dibuat beserta direktorinya.
Sekarang, index.html ini sudah siap dibangun menggunakan framework Bootstrap. Tinggal pikirkan bagaimana kalian ingin membuat template untuk index.html ini.
Menu Navigasi Bootstrap
Pasti bagian menu atau navigasi terlebih dahulu karena setiap situs web memang memerlukan menu, langsung aja copy code berikut ini dan tempelkan setelah tag <body>:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Navigasi →</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Rio Bermano</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home <span class="sr-only">(current)</span></a></li>
<li><a href="#">Blog</a></li>
<li><a href="">Portfolio</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategori <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Artikel</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Terlaris</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Cari...">
</div>
<button type="submit" class="btn btn-default">Cari</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Login</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Daftar <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Penulis Blog</a></li>
<li><a href="#">Pekerjaan</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Menu Lain</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Ini merupakan navbar standar bawaan Bootstrap, kalo kalian cocok langsung pake kalo gak cocok silahkan di otak-atik sesuai selera. Kalo gak yakin cara otak-atiknya biarkan aja seperti ini, cukup ganti nama-nama menunya sesuai kebutuhan.
Kalo ada yang bertanya “Apa bedanya membuat nav sendiri dan membuat navbar menggunakan framework Bootstrap ?” Silahkan save file index.html ini kemudian lihat hasilnya, menu sudah tampil seperti biasanya. Coba perkecil layar browser sekecil mungkin atau sampai seukuran layar smartphone, navigasi otomatis mengecil sekaligus berubah menjadi toggle menu yang minimalis dan tetap responsive.
Sebagai gambaran saja, contoh halaman home / index.html yang akan kita buat misalnya seperti ini: (lihat gambar).
Dilihat dari contoh ini, terdapat header yang lebar penuh tepat dibawah menu artinya sekarang kita akan membuat bagian itu karena menu sudah diterapkan. Silahkan tempelkan code berikut setelah tag penutup </nav>:
<div class="container-fluid">
<div class="container">
<div class="row">
</div>
</div>
</div>
Didalam bagian ini (setelah class=”row”) akan dimasukkan element-element yang diperlukan, jika dilihat pada contoh diatas terdapat text + tombol disebelah kiri dan video disebelah kanan.
Informasi:
- container-fluid adalah container pada bagian HTML yang lebarnya penuh (full width)
- container adalah container pada bagian HTML yang lebarnya kotak (boxed) dibagian tengah-tengah situs
- row adalah baris pada HTML
Semua element ini dibuat di framework Bootstrap, kita cukup meneraknanya di HTML, gampang kan ?
Perhatikan pada gambar, dibagian atas terdapat background merah yang lebar penuh sedangkan text + tombol dan video berada di tengah-tengah situs seolah ada kotak lagi didalam element background merah tersebut. Itu memang benar, karena disini kita gunakan container-fluid sebagai background merah dan video serta text ditempatkan didalam row yang sudah dibungkus container.
Masih bingung ? Lihat : Video tutorial cara membuat web sendiri yang responsive.
Selamat mencoba !
Part 1 selesai sampai sini, silahkan lanjut ke part berikutnya (part 2).