Belajar Bootstrap: 2. Membuat Menu Responsive Dengan Bootstrap - Boostrap adalah salah satu framework CSS paling populer saat ini dan paling banyak digunakan serta tentunya dijamin 100% responsive. Maka dari itu, penting rasanya sekarang untuk kita belajar tentang bootsrap ini, mengingat banyak perusahan juga yang menggunakan bootsrap untuk website mereka.
Dan pada kesempatan kali ini kita akan belajar bagaimana cara membuat menu navigasi responsive dengan menggunakan boostrap terbaru yaitu bootsrap 4.5 (saat artikel ini dibuat dan sedang ada bootsrap 5.2 alpha saat ini) yang cocok untuk pemula. Yang akan kita buat hasil Menunya akan seperti berikut:
Fitur menu navigasi : ada icon gambar, ada dropdown menu dan ada search box. Serta untuk responsivenya akan menjadi seperti berikut:
di responsivenya akan ada burger menu di sebelah kanan dan icon di sebelah kiri yang apabila di klik akan muncul menu secara dropdown.
Gimana? menarik kan Oke langsung saja kita ke tutorialnya:
Pertama, yang kita butuhkan adalah text editor, bootsrap files (kalau dari CDN berarti butuh internet), dan browser bisa menggunakan google chrome atau mozilla firefox. Jika ingin belajar secara offline download dulu bootsrapnya:
Download Bootsrap 4.5 https://getbootstrap.com/docs/4.5/getting-started/download/
Pilih yang Compiled/minified yah (sudah di compress sehingga size filenya kecil dan cepat diaksesnya)
Extrak filenya lalu akan ada file css dan js yang dibutuhkan untuk bootsrap ini.
Jika memakai CDN (butuh akses internet bisa mamakai code berikut untuk css nya (tempatkan di antara tag head atau sebelum </head>)
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
dan untuk javascriptnya pastekan code berikut sebelum </html>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
Kedua, kita buat file bernama index.html (bebas dimana saja), lalu buat kode html dasar seperti biasa dengan memasukan code bootsrapnya (saya memakai cdn disini yah jadinya seperti berikut:
Okai lanjut, sekarang kita kana buat kode html nya, dan letakan setelah <body>
<nav class="navbar navbar-expand-lg navbar-light bg-light"><a class="navbar-brand" href="#"><img src="https://getbootstrap.com/docs/4.5/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="" loading="lazy"></a><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button><div class="collapse navbar-collapse" id="navbarSupportedContent"><ul class="navbar-nav mr-auto"><li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li><li class="nav-item"><a class="nav-link" href="#">Link</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown link</a><div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><a class="dropdown-item" href="#">Action</a><a class="dropdown-item" href="#">Another action</a><a class="dropdown-item" href="#">Something else here</a></div></li><li class="nav-item"><a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a></li></ul><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button></form></div></nav>
Simpan dan jalankan di browser:
Ini sudah selesai kita membuat menu responsive dengan bootstrap, gimana cara membuat menu responsive dengan bootstrap gampang banget kan?
0 Komentar