Belajar Bootstrap Part 12 : Membuat Navigation Bar 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
TUTORIAL BOOTSTRAP DASAR LAINYA :
- Bootstrap Part 1 : Mengenal Dan Cara Menggunakan Bootstrap
- Bootstrap Part 2 : Membuat Tabel Dengan Bootstrap
- Bootstrap Part 3 : Mengatur Tampilan Gambar Bootstrap
- Bootstrap Part 4 : Cara Membuat Tombol Dengan Bootstrap
- Bootstrap Part 5 : Membuat Jumbotron Dengan Bootstrap
- Bootstrap Part 6 : Membuat Pesan Alert Dengan Bootstrap
- Bootstrap Part 7 : Membuat Icon Bootstrap
- Bootstrap Part 8 : Membuat Pagination dan Breadcrumb Bootstrap
- Bootstrap Part 9 : Membuat List Dengan Bootstrap
- Bootstrap Part 10 : Membuat Panel Dengan Bootstrap
- Bootstrap Part 11 : Membuat Navigasi Tabs Dan Pils
- Bootstrap Part 12 : Membuat Navigation Bar Bootstrap
- Bootstrap Part 13 : Membuat Form Dengan Bootstrap
- Bootstrap Part 14 : Membuat Carousel / Slideshow Dengan Bootstrap
- Bootstrap Part 15 : Membuat Modal Dengan Bootstrap
- Bootstrap Part 16 : Mengenal Grid System Bootstrap
Tidak ada komentar :
Posting Komentar