Bootstrap Chapter 12 - Membuat Navigation Bar dengan Bootstrap
MEMBUAT NAVIGATION BAR BOOTSTRAP
Untuk membuat navigation bar dengan Bootstrap tidaklah sulit. Seperti pada tutorial - tutorial Bootstrap sebelumnya sobat hanya perlu menambah class - class yang sudah di sediakan oleh Bootstrap. Pada tutorial kali ini akan dijelaskan membuat navigasi yang memiliki dua warna, yaitu default dan inverse yang akan dilihat pada Belajar Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
Navigation bar Bootstrap dibuat dengan menggunakan tag <nav>. Dan diletakkan dalam tag <bdy> html paling atas
MEMBUAT NAVIGATION BAR BOOTSTRAP
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 12 : Membuat Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<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="http://www.script-kiddies22.blogspot.co.id">SCRIPT KIDDIES</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<h1>Membuat Navigation Bar Bootstrap <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
</body>
</html>
Perhatikan contoh diatas, disini akan saya jelaskan sedikit masing-masing kegunaan dari class-class yang dalam membuat navigator Bootstrap. Dapat dilihat pada contoh diatas untuk membuat menu navigation Bootstrap gunakan class
<nav class="navbar navbar-default">class "navbar-default" digunakan untuk membuat navigation bar dengan model standart. Sobat bisa menggantinya dengan "navbar-inverse" untuk membuat menu navigation bar Bootstrap dengan model gelap.
<div class="container-fluid">Digunakan untuk membuat sisi menu navigation penuh atau full. Sobat bisa menggantinya menjadi
<div class="container">Untuk membuat sisi menu navigation bar tidak penuh dapat kita gunakan class
<div class="navbar-header">Digunakan untuk membuat bagian header dari menu navigation Bootstrap. "nabar-header" untuk mendefinisikan bagian header menu navigation. dan "navbar-brand" digunakan untuk mendefinisikan judul webiste.
<ul class="nav navbar-nav">Class diatas digunakan untuk membuat menu navigation.
<li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">Class diatas digunakan untuk membuat link menu yang terletak pada bagian sebelah kanan dari menu navigation bar Bootstrap.
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
MEMBUAT MENU DROPDOWN PADA MENU NAVIGATION BAR BOOTSTRAP
Sobat juga bisa membuat menun dropdown pada menu navigation bar Bootstrap dengan cara berikut
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 12 : Membuat Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<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="http://www.script-kiddies22.blogspot.co.id">SCRIPT KIDDIES</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Tutorial</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">BBM</a></li>
<li><a href="#">WA</a></li>
<li><a href="#">FB</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<h1>Membuat Navigation Bar Bootstrap <a href="http://www.script-kiddies.org">Script Kiddies</a></h1>
</body>
</html>
MENAMBAHKAN GAMBAR PADA MENU HEADER
Jika sobat ingin menambahkan gambar pada navbar brand. Sobat bosa mengikuti contoh membuat gambar pada navigation berikut
<nav class="navbar navbar-default">MEMBUAT NAVIGATION RESPONSIVE DENGAN BOOTSTRAP
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Ada sebuah kelebihan pada Bootstrap. Yaitu sobat dapat membuat navigation yang responsive saat dijalankan dari smartphone atau bisa monitor yang resolusinya lebih kecil. Silahkan perhatikan pada contoh berikut ini
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Part 12 : Membuat Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</head>
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="http://www.script-kiddies22.blogspot.co.id">SCRIPT KIDDIES</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="http://www.script-kiddies22.blogspot.co.id">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Tutorial</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Profil <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">BBM</a></li>
<li><a href="#">WA</a></li>
<li><a href="#">FB</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Daftar</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<h1>Membuat Navigation Bar Bootstrap </h1>
</body>
</html>
 |
| ketika kita kecilkan |
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">Sebagai tombol yang muncul saat laman web dibuka dari monitor yang memiliki resolusi kecil seperti screenshot diatas
<span class="sr-only"> Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
KESIMPULAN
Dengan adanya class nav pada Bootstrap ini kita dimudahkan untuk membuat navigation bar pada sebuah website dan kita suguhkan dengan tampilan yang rapi dan modern dan tentunya responsive di semua resolusi layar.
REFERENSI : Malas Ngoding
No comments :
Post a Comment