Bootstrap
Pada tutorial kali ini mimin akan membahas masalah web developer nih, yang namanya web developer kaitan banget dong sama HTML,CSS,JS,dll. Nah, ga mungkin dong kalian bisa menghafal semua codingan diatas secara cepat, oleh karena itu maka diciptakanlah bootstrap untuk memudahkan dalam pembuatan website dan tentunya memudahkan web developer untuk membuat website semakin responsive dan menarik untuk dikunjungi.
Kali ini mimin akan memberikan kalian cara membuat navbar responsive tentunya menggunakan bootstrap 4 biar fast dan simpel.
Oh iya, mimin codingnya di Android ya.. Jadi screenshot nya, screenshot di Android.
Kira-kira bisalah kalian bayangkan hasilnya dengan melihat screenshot diatas, dan untuk full kodenya bisa di ambil dibawah ini.
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<img src="https://h.top4top.io/p_15438mijj0.jpg" width="30" height="30" class="d-inline-block align-top" alt="">
LightCyberIndo
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<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="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Subscribe</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Tutorial
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Navbar</a>
<a class="dropdown-item" href="#">Responsive</a>
<a class="dropdown-item" href="#">Only using Android</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Itu tadi kode untuk membuat navbar responsive dengan menggunakan bootstrap 4. Tinggal kalian copy & paste, lalu lihat hasilnya.
0 Comments