Cara menggunakan apakah bootstrap responsive?

Untuk membuat menu responsive dengan Bootstrap tidaklah sulit. Anda hanya perlu menambahkan beberapa classsesuai ketentuan Bootstrap sehingga menu yang dibuat akan tampil responsive.

Table of Contents Show

Membuat Dokumen HTML Dengan Bootstrap
Membuat Struktur Navigation Bar Bootstrap
Mengubah Warna Menu Bootstrap
Apakah bootstrap responsive?
Apa fungsi bootstrap dan bagaimana cara kerjanya?
Untuk menggunakan bootstrap Apakah harus membayar?
Bagaimana menggunakan bootstrap secara offline?

Pada tutorial sebelumnya kita sudah belajar membuat menu responsive menggunakan perintah HTML dan CSS yang ditulis manual. Sekarang mari kita belajar bagaimana cara membuat menu responsive menggunakan framework CSS Bootstrap.

Daftar Isi

Membuat Dokumen HTML Dengan Bootstrap

Langkah pertama, buatlah sebuah file dokumen HTML misal menu.html. Kemudian tambahkan resource bootstrap pada file tersebut agar nantinya kita dapat dengan mudah menuliskan perintah bootstrap.

<!DOCTYPE html>
<html>
   <head>
      <title>Membuat Menu Responsive dengan Bootstrap</title>
      <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
      <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
   </head>
<body>

</body>
</html>

Perhatikan kode diatas, kita menggunakan metode eksternal CSS untuk menggunakan framework bootstrap di dokumen HTML yang telah dibuat.

Selanjutnya, mari kita buat struktur menu atau navigation bar dengan bootstrap. Tuliskan kode perintah berikut untuk membuat menu navigasi bootstrap, letakkan di dalam tag <body>.

<nav class="navbar navbar-default">
	<div class="container-fluid">
    	<div class="navbar-header">
      		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            	<span class="sr-only">Toggle navigation</span>
              	<span class="icon-bar"></span>
              	<span class="icon-bar"></span>
              	<span class="icon-bar"></span>
            </button>
      		<a class="navbar-brand" href="#">ePlusGo</a>
    	</div>
    	<div id="navbar" class="navbar-collapse collapse">
	      	<ul class="nav navbar-nav">
	        	<li class="active"><a href="#">Home</a></li>
	        	<li><a href="#">About</a></li>
	        	<li><a href="#">Contact</a></li>
	        	<li class="dropdown">
	          		<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Tutorial <span class="caret"></span></a>
	          		<ul class="dropdown-menu">
	            		<li><a href="#">HTML</a></li>
	            		<li><a href="#">CSS</a></li>
	            		<li><a href="#">jQuery</a></li>
	            		<li role="separator" class="divider"></li>
	            		<li class="dropdown-header">Lainnya</li>
	            		<li><a href="#">Laravel</a></li>
	            		<li><a href="#">Vue JS</a></li>
	          		</ul>
	        	</li>
	      	</ul>
    	</div>
  	</div>
</nav>

Sekarang, bila kita mengakses file menu.html maka akan tampil menu seperti berikut ini.

Tampilan Menu Responsive Dengan Bootstrap di Desktop

Beda lagi jika kita membukanya di perangkat mobile maka tampilannya seperti berikut.

Tampilan Menu Responsive Di Perangkat Mobile

Apabila kode yang Anda tuliskan sudah berhasil tampil seperti diatas. Selamat, Anda telah berhasil membuat menu responsive dengan bootstrap.

Apakah Anda ingin mengubah warna menu navigasi bootstrap sesuai keinginan ?! Bila iya, berikut contoh kode CSS sederhana untuk mengubah warna menu navigasi bootstrap.

.navbar-green {
  background:#2ECD71;
}

.navbar-green a {
  color:#ffffff;
}
.navbar-green .navbar-nav > li > a:hover,
.navbar-green .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-green .navbar-nav > .active > a,
.navbar-green .navbar-nav > .active > a:hover,
.navbar-green .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #ffffff;
}
.navbar-green .navbar-nav > .open > a,
.navbar-green .navbar-nav > .open > a:hover,
.navbar-green .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #ffffff;
}
.navbar-green .navbar-toggle {
    border-color: #ffffff;
}
.navbar-green .navbar-toggle:hover,
.navbar-green .navbar-toggle:focus {
    background-color: #ffffff;
}
.navbar-green .navbar-toggle .icon-bar {
    background-color: #CCC;
}

Pada kode diatas, kita membuat class navbar-green untuk mengubah warna menu bootstrap menjadi hijau. Untuk menggunakannya silakan ganti class navbar-default menjadi navbar-green pada kode menu navbar Anda.

Tampilan Menu Bootstrap Setelah diubah Warna

Untuk melihat hasil lebih lanjut silakan akses demo berikut ini.

Demo

Kesimpulan

Demikian tutorial singkat bagaimana cara membuat menu responsive menggunakan bootstrap. Silakan Anda praktekkan untuk memahami setiap kode diatas.

Apakah bootstrap responsive?

Menariknya lagi, Bootstrap bersifat responsive berkat grid system yang digunakan. Sistem grid pada bootstrap menggunakan rangkaian containers, baris, dan kolom untuk menyesuaikan bentuk layout dan konten website kamu.

Apa fungsi bootstrap dan bagaimana cara kerjanya?

Tujuan dan fungsi Bootstrap adalah untuk membuat website responsive dan mobile-first. Jadi, semua elemen antarmuka website dipastikan bisa bekerja secara optimal di semua ukuran layar, baik desktop maupun perangkat seluler.

Untuk menggunakan bootstrap Apakah harus membayar?

Bootstrap merupakan framework open-source yang bebas untuk dikembangkan oleh penggunannya. Hal ini tentu akan membuat Bootstrap lebih berkualitas berkat berbagai kontribusi dari pengembang di seluruh dunia. Selain itu, sifat Bootstrap yang open-source membuat Anda bebas menggunakannya tanpa harus mengeluarkan biaya.