HASANONTA - 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
Contoh :
<!DOCTYPE html>
<html>
<head>
<title>HasanOnta</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.HasanOnta.ga">HasanOnta</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.hasanonta.ga">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.HasanOnta.ga">HasanOnta</a></h1>
</body>
</html>
Output :
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">
<li class="active"><a href="http://www.hasanonta.ga">Home</a></li>
<li><a href="#">Profil</a></li>
<li><a href="#">Tentang Kami</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
Class diatas digunakan untuk membuat menu navigation.
<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>
Class diatas digunakan untuk membuat link menu yang terletak pada bagian sebelah kanan dari menu navigation bar Bootstrap.
MEMBUAT MENU DROPDOWN PADA MENU NAVIGATION BAR BOOTSTRAP
Anda 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.hasanonta.ga">HasanOnta</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.hasanonta.ga">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.hasanonta.ga">HasanOnta</a></h1>
</body>
</html>
Output :
MENAMBAHKAN GAMBAR PADA MENU HEADER
Jika anda ingin menambahkan gambar pada navbar brand. anda bisa mengikuti contoh membuat gambar pada navigation berikut :
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
MEMBUAT NAVIGATION RESPONSIVE DENGAN BOOTSTRAP
Ada sebuah kelebihan pada Bootstrap. Yaitu anda 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="#">HasanOnta</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">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>
Output pada monitor pc :
Perhatikan contoh diatas. Anda juga dapat membuat form pada menu navigation bar adapun kegunaan dari
<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>
Hello, my name is Jack Sparrow. I'm a 50 year old self-employed Pirate from the Caribbean. 
Tidak ada komentar:
Posting Komentar