Bar navigasi
Sebuah bar navigasi adalah header navigasi yang ditempatkan di bagian atas halaman:
Dengan Bootstrap , bar navigasi bisa memperpanjang atau runtuh, tergantung pada ukuran layar.
Sebuah bar navigasi standar dibuat dengan <nav class="navbar navbar-default"> .
Contoh berikut menunjukkan cara menambahkan bar navigasi ke atas halaman:
Contoh
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
...
Cobalah sendiri " Semua contoh di halaman ini akan menampilkan sebuah bar navigasi yang mengambil terlalu banyak ruang pada layar kecil (Namun, panel navigasi akan berada pada satu baris pada layar besar - karena Bootstrap responsif). masalah ini (dengan layar kecil) akan diselesaikan dalam contoh terakhir di halaman ini.
Inverted Navigation Bar
Jika Anda tidak menyukai gaya bar navigasi default, Bootstrap memberikan alternatif, navbar hitam:
Hanya mengubah .navbar-default kelas menjadi .navbar-inverse :
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav>
Cobalah sendiri " Tetap Navigation Bar
Bar navigasi juga bisa diperbaiki di bagian atas atau di bagian bawah halaman.
Sebuah bar navigasi tetap tetap terlihat dalam posisi tetap (atas atau bawah) independen dari halaman gulir.
The .navbar-fixed-top kelas membuat bar navigasi tetap di atas:
Contoh
<nav class="navbar navbar-inverse
navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> Cobalah sendiri " The .navbar-fixed-bottom kelas membuat navigasi bar tinggal di bagian bawah:
Contoh
<nav class="navbar navbar-inverse
navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> Cobalah sendiri " Navigasi Bar Dengan Dropdown
Bar navigasi juga dapat menahan menu dropdown.
Contoh berikut menambahkan menu dropdown untuk tombol "Page 1":
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li
class="dropdown">
<a
class="dropdown-toggle" data-toggle="dropdown" href="#">Page
1
<span class="caret"></span></a>
<ul
class="dropdown-menu">
<li><a href="#">Page
1-1</a></li>
<li><a href="#">Page
1-2</a></li>
<li><a href="#">Page
1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</nav> Cobalah sendiri " Hak-Blok Navigation Bar
The .navbar-right kelas digunakan untuk benar-align tombol navigasi bar.
Pada contoh berikut kita menyisipkan "Sign Up" tombol dan tombol "Login" di sebelah kanan di bar navigasi. Kami juga menambahkan glyphicon pada masing-masing dua tombol baru:
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</nav> Cobalah sendiri " Runtuh Navigasi Bar
Bar navigasi memakan terlalu banyak ruang pada layar kecil.
Kita harus menyembunyikan bar navigasi; dan hanya menunjukkan itu ketika dibutuhkan.
Pada contoh berikut bar navigasi digantikan oleh tombol di pojok kanan atas. Hanya ketika tombol diklik, bar navigasi akan ditampilkan:
Contoh
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#myNavbar">
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a href="#"><span
class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span>
Login</a></li>
</ul>
</div>
</div>
</nav> Cobalah sendiri " Uji Diri dengan Latihan!
Latihan 1 » Latihan 2» Latihan 3 » Latihan 4»