Navigasi Bar Bootstrap
Muhammad Aqshol Rifanza - 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. Navigation bar Bootstrap dibuat dengan menggunakan tag <nav>. Dan diletakkan dalam tag <body> html paling atas
Membuat Navigasi Bar
<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 Dropdown Pada Navigasi Bar
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
- http://www.script-kiddies.org
- http://www.malasngoding.com
- http://www.w3school.com
Tidak ada komentar