Tutorial Membuat Navbar dengan Bootstrap 4
Navbar adalah elemen penting dari suatu website atau sebuah aplikasi. Navbar sangat berfungsi untuk membuat user atau pengguna menjadi lebih nyaman. Tanpa adanya navbar yang jelas, kemungkinan besar user atau calon user pun akan kebingungan untuk menjelajahi lebih jauh, baik itu suatu website atau aplikasi. Untuk itulah, disini kita akan membahas bagiamana sih cara membuat navbar menggunakan Bootstrap 4?
Mengapa harus belajar menggunakan Bootstrap ?
Hal utama untuk menjawab soal ini adalah, karena bootstrap sangat mudah untuk di gunakan. Apalagi bagi kamu yang tidak memahami mengenai sebuah kode - kode atau yang baru belajar mengenai programming.
Bootstrap memberikan fasilitas dan edukasi yang cocok bagi mereka yang ingin terjun ke dalam pembelajaran programming. Apalagi untuk kamu yang ingin memiliki sebuah website sendiri. Tentu, bootstrap dapat membantu kamu dalam membuat website impianmu.
Kita kembali ke permasalah awal kita yaitu cara membuat Navbar dengan menggunakan Bootstrap.
Ini adalah kode awal yang di gunakan bila menggunakan Bootstrap 4 ;
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- Bootstrap JS -->
<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>
</body>
</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>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
Navbar
<!-- As a link -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- As a heading -->
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
Nav Logo
<!-- Hanya Gambar -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="url gambar kamu" width="30" height="30" alt="" loading="lazy">
</a>
</nav>
<!-- Gambar dan Teks -->
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="url gambar kamu" width="30" height="30" class="d-inline-block align-top" alt="" loading="lazy">
Bootstrap
</a>
</nav>
Navigasi Link Menu
<nav class="navbar navbar-light bg-light">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
......
</ul>
</div>
Dengan menggunakan kode ini, kamu akan mudah untuk mengedit beberapa menu yang ada di Navbar nantinya.
<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="#">Menu 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Menu 2</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 menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Sub menu 1</a>
<a class="dropdown-item" href="#">Sub menu 2</a>
<a class="dropdown-item" href="#">Sub menu 3</a>
</div>
</li>
Form Pencarian
<form class="form-inline">
<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>
Rajinnya buat tutorial pengaturcaraan. Okay untuk Navigasi bar dan semua berada di atas itu amat penting untuk memudahkan pembaca. Kebiasaanya Home, About dan Contact, Search dan MedSos berada di atas. Tapi depend kepada owner web / blog utk paparkan yang mana satu merekan inginkan. Semua itu boleh di selenggara jika tahu caranya. Baca blog ini lah kan. Hehe. Teruskan menulis ya. Well done! All the best!
ReplyDeleteThanks :D
DeleteBagusnya sharing pasal coding sebegini. Rawlins tak pandai la nak buat code-code nie. Selalu download templat yang ready-made je. Thanks for sharing
ReplyDeleteLagi iseng aja kaka. Makasih udah mampir.
DeleteLH tak pernah faham dengan code-code programming ni. Ambil yang dah sedia ada aje. Memang pening lah. Nice sharing though
ReplyDeleteIyaa yah, lebih praktis dan simpel..
DeleteMudah aje kalau siapa yang pandai adjust edit codingnya tu..kalau jenis tak tau guna html tu, mau juling mata.. nanti nak cuba juga kalau nak tambah navbar baru nanti..
ReplyDeleteHaha, iyaa terimakasih kunjungannya.
DeleteBestnyaa bila tahu dan mahir selok-belok coding dan programming macam ni, thanks for sharing tutorial terperinci macam ni yea! Boleh jadi as rujukan nanti 👍🏻
ReplyDeleteOkeeeyy :D
DeleteBagus la artikel awak sebab selalu bagi informasi yang berguna kepada para pembaca. Keep it up
ReplyDeleteTerimakasihh..
DeleteThis is a very useful information. It’s important for us content creators to know. Thank you for sharing this knowledge with me.
ReplyDeleteGood information sharing. Budak2 programmer atau baru nak belajar, mesti cari dkt google info mcm ni kan. Sy dh lama tinggalkan, tapi tengok coding tu faham la sikit2
ReplyDeleteOh mai... Lama giler tak sentuh part coding... Dah return balik knowledge kat lecturer! Hahaha.. Interesting article to make our blog useful kan.. Byk lagi yang Kitkat kena explore about dunia blogger ni.. Ye la skrg macam baby blogger baru lahir in 2020..hehe...
ReplyDeleteLama dah tak buat coding-coding ni. Sekarang macam complicated sangat dah codingnye. Hehe
ReplyDeleteIyaaa haha, banyak yang baru :D
DeleteIlmu,skil dan kepintaran yang bagus sekali Tuhan kurnia pada
ReplyDeletemereka yg kepakaran dlm hal ini. Bukan mudah mau fahami dunia coding bagi saya. Madam memang 'failed' when it comes to this. Maybe dats why i start blogging with Blogspot. Drag n drop. Tak bisa fikir lebih ttg teknikalnya. Above all, good job 2u!
Fuh, sangat advanced ni. Saya masih lagi merangkak nak guna Wordpress dan Elementor.
ReplyDeletelamanya dan edit coding coding ni. mungkin kena star banlik supaya blog lebih laju. tq di atas perkongsiannya
ReplyDeleteWahh hebat ni pndai guna koding. Blog pon kalau boleh guna widget sedia ada je. Mmg xpandai nak explore koding ni. At least boleh refer cn kalau rasa nk belajar koding.
ReplyDeletesatu perkongsian yang bagus. kita tak pandai sangat pasal2 coding ni. simple2 boleh la. tq for sharing.
ReplyDeleteWow thanks for the info. I m not good at all these coding work, usually i write and post jer, need to learn.
ReplyDeletemudah fahami utk orang yang tak paham aturcara coding.. thanks sharing this info ya...
ReplyDeleteTB pun tak berapa faham sangat coding2 ni.. Dulu edit blog sendiri sampai migrain jadinya bila error.. Hahaha
ReplyDelete