Saya adalah orang yang paling malas didunia ini, status saya adalah single berfaedah untuk dunia ini

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





Dari gambar diatas, disitu dijelaskan 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.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>
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 Dropdown Pada Navigasi Bar





Membuat Navigasi Responsive





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