Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia
Tutorial Bootstrap 3 Navbar
TrikSonic - Tutorial kali ini kita akan berguru ihwal cara menciptakan navbar dengan memakai bootstrap 3.
Apa itu navbar ? navbar ialah kafetaria navigasi atau blok navigasi yang dipakai pada sebuah halaman html atau sebuah aplikasi yang pada umumnya berada diposisi atas sebuah dokumen.
Dengan memakai Bootstrap, keperluan untuk menciptakan navabar sanggup dilakukan atau dibentuk dengan cepat efisien dan modern serta yang tidak kalah penting ialah desain responsive pada semua perangkat
Berikut tutorial dan pola ihwal Navbar dengan memakai Bootstrap 3 :
Table of contents
Bootstrap 3 - Default navbar
Default navbar ialah komponen dasar penggunaan bootstrap navbar, nama class yang dipakai ialah
.navbar-default yang ditulis pada class dasarnya .navbar Cara penulisan
<nav class="navbar navbar-default"> ... </nav> Contoh
<nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <!-- tombol membuka dropdown [media responsive] --> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Nama Blog / website --> <a class="navbar-brand" href="#">TrikSonic</a> </div> <div class="collapse navbar-collapse" id="collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <!-- tombol membuka dropdown list--> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <!-- dropdown list --> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </li> </ul> </div> </div> </nav> Hasil
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 CSS--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <h2>Bootstrap 3 - Navbar default</h2> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <!-- tombol membuka dropdown [media responsive] --> <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapse-1"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Nama Blog / website --> <a class="navbar-brand" href="#">TrikSonic</a> </div> <div class="collapse navbar-collapse" id="collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link Active</a></li> <li><a href="#">Link 2</a></li> <li class="dropdown"> <!-- tombol membuka dropdown list--> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Dropdown <span class="caret"></span> </a> <!-- dropdown list --> <ul class="dropdown-menu"> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> <li><a href="#">Menu 5</a></li> </ul> </li> </ul> </div> </div> </nav> <p> Silahkan atur area preview untuk melihat media screen (atau tampilan) </p> <div class="alert alert-warning"> <strong>Catatan :</strong> Penggunaan javascript diharapkan untuk demo ini. </div> <!-- jquery dan bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Bootstrap 3 - Inverted navbar
Jika tidak ingin dengan tampilan warna pada navbar default, bootstrap juga memperlihatkan warna lainnya yaitu hitam dengan tingkat kepekatan diatas sedang, yang mempunyai nilai warna : #222;
Untuk menerapkannya, cukup menambahkan class
.navbar-inverse ke class dasar .navbarCara Penulisan
<nav class="navbar navbar-inverse"> ... </nav> Contoh
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </nav> Hasil
<!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- Bootstrap 3 css --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <h2>Bootstrap 3 - Inverted navbar</h2> <!-- navbar open --> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> <li><a href="#">Menu 4</a></li> </ul> </div> </nav> <!-- navbar close --> <p> Atur lebar preview, untuk melihat media responsive </p> <p> Contoh ini tanpa penggunaan javascript, untuk fungsi dropdown sajian sanggup melihat pola yang lainnya. </p> </div> </body> </html>
Bootstrap 3 - Navbar Forms dan Dropdown Menu
Berikut pola yang sanggup dipelajari untuk menciptakan navbar dengan memasukan sebuah form dan sajian dropdown
Contoh
<nav class="navbar navbar-inverse"> <div class="navbar-header"> <!-- tombol untuk membuka dan menutup menu, diarea responsive --> <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Judul --> <a href="#" class="navbar-brand">TrikSonic</a> </div> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> Dropdown <span class="caret"></span> </a> <!-- Dropdown List --> <ul class="dropdown-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li class="divider"></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> </ul> <!-- form --> <form class="navbar-form navbar-left"> <div class="input-group"> <input class="form-control" type="text"/> <span class="input-group-btn"> <!--ganti nilai dari type button, sesuai dengan keperluan--> <button class="btn btn-default" type="button">Search</button> </span> </div> </form> </div> </nav> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 CSS--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <h2>Bootstrap 3 - Navbar Form dan Dropdown Menu</h2> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <!-- tombol untuk membuka dan menutup menu, diarea responsive --> <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Judul --> <a href="#" class="navbar-brand">TrikSonic</a> </div> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> Dropdown <span class="caret"></span> </a> <!-- Dropdown List --> <ul class="dropdown-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li class="divider"></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> </ul> <!-- form --> <form class="navbar-form navbar-left"> <div class="input-group"> <input class="form-control" type="text"/> <span class="input-group-btn"> <!--ganti nilai dari type button, sesuai dengan keperluan--> <button class="btn btn-default" type="button">Search</button> </span> </div> </form> </div> </nav> <p> Silahkan atur area preview untuk melihat media screen (atau tampilan) </p> <div class="alert alert-warning"> <strong>Catatan :</strong> Penggunaan javascript diharapkan untuk demo ini. </div> <!-- jquery dan bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Bootstrap 3 - Navbar Brand image
Digunakan untuk mengganti teks Judul dengan sebuah gambar. Mungkin css pelengkap diharapkan semoga tampilan sesuai dengan keinginan.
Contoh
<style> /*custom css navbar brand*/ .navbar-brand.triksonic-logo { /*property : value*/ } </style> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand triksonic-logo" href="#"> <!-- Logo image--> <img alt="demo" src="..."/> </a> </div> </div> </nav> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- css, jQuery, dan bootstrap3 js --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> /* custom css navbar merk image Sesuaikan dengan logo anda */ .navbar-brand.triksonic-logo { padding : 7px 15px; } </style> </head> <body> <div class="container"> <h2>Bootstrap 3 - Navbar Brand image</h2> <!-- navbar open --> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- tombol untuk membuka dan menutup menu, diarea responsive --> <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="navbar-header"> <a class="navbar-brand triksonic-logo" href="#"> <img alt=" Tutorial kali ini kita akan berguru ihwal cara menciptakan navbar dengan memakai bootst Bootstrap 3 Navbar - Tutorial Bootstrap Indonesia" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMWdxbVyY-m0rjhFjIo0CRVHqagW3fBIXTmDvCvfSygYZAv_BxJp0KH2fF6J5bKR7sLR9y9AFZ-EdOKC76WKtkw_8jLFxJM9O07fMFMu-aVd65_ZcI94AEirJyU4aVzsw6V04lzDVY_InI/s1600/TrikSonic-Logo.png"/> </a> </div> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> Dropdown <span class="caret"></span> </a> <!-- Dropdown List --> <ul class="dropdown-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li class="divider"></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> </ul> <!-- form --> <form class="navbar-form navbar-left"> <div class="input-group"> <input class="form-control" type="text"/> <span class="input-group-btn"> <!--ganti nilai dari type button, sesuai dengan keperluan--> <button class="btn btn-default" type="button">Search</button> </span> </div> </form> </div> </div> </nav> <!-- navbar close --> <div class="alert alert-info"> <strong>Catatan :</strong> JavaScript diharapkan untuk open close sajian dan dropdown sajian </div> </div> </body> </html> Bootstrap 3 - Navbar Buttons
Digunakan untuk menambahkan sebuah tombol atau button, yang mungkin dipergunakan untuk fungsi dari javascript. Tambahakan class
.navbar-btn pada class dasar .btn, misal menyerupai ini :<button class="btn btn-default navbar-btn">Button</button> <button class="btn btn-primary navbar-btn">Button</button> <button class="btn btn-danger navbar-btn">Button</button> etc.. Contoh
<!-- navbar 1 open --> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <button class="btn btn-primary navbar-btn">Button</button> </div> </nav> <!-- navbar 1 close --> <!-- navbar 2 open --> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <button class="btn btn-danger navbar-btn">Button</button> </div> </nav> <!-- navbar 2 close --> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- css, jQuery, dan bootstrap3 js --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 - Navbar Button</h2> <!-- navbar 1 open --> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <button class="btn btn-primary navbar-btn">Button</button> </div> </nav> <!-- navbar 1 close --> <!-- navbar 2 open --> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <button class="btn btn-danger navbar-btn">Button</button> </div> </nav> <!-- navbar 2 close --> <p> Resize area preview untuk melihat media screen </p> </div> </body> </html>
Bootstrap 3 - Navbar Text
Digunakan untuk menuliskan sebuah teks biasa, didalam navbar. Untuk penerapan gunakan class
.navbar-text pada element html, misal <p> atau <div>Contoh
<nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <!-- navbar text open--> <div class="navbar-text">Teks Biasa</div> <div class="navbar-text">Teks Biasa</div> <!-- navbar text close--> </div> </nav> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- css, jQuery, dan bootstrap3 js --> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Bootstrap 3 - Navbar Text</h2> <!-- navbar open --> <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">TrikSonic</a> </div> <ul class="nav navbar-nav"> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> </ul> <!-- navbar text open--> <div class="navbar-text">Teks Biasa</div> <div class="navbar-text">Teks Biasa</div> <!-- navbar text close--> </div> </nav> <!-- navbar close --> <p> Resize area preview untuk melihat media screen </p> </div> </body> </html>
Bootstrap 3 - Navbar Component alignment
Digunakan untuk mengatur posisi atau keselarasan element. Untuk penerapannya gunakan class
.navbar-left atau .navbar-right pada element HTML yang ingin diatur posisi nya.Sebenarnya Bootstrap 3 sudah menyediakan class tertentu untuk mengatur keselarasan element, menyerupai
.pull-left dan .pull-right, tapi untuk tampilan navbar yang sempurna disemua perangkat penggunaan class .navbar-left atau .navbar-right lebih disarankanContoh
<nav class="navbar navbar-inverse"> <div class="navbar-header"> <!-- tombol untuk membuka dan menutup menu, diarea responsive --> <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Judul --> <a href="#" class="navbar-brand">TrikSonic</a> </div> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> Dropdown <span class="caret"></span> </a> <!-- Dropdown List --> <ul class="dropdown-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li class="divider"></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> </ul> <!-- form --> <form class="navbar-form navbar-right"> <input class="form-control" type="text"/> </form> </div> </nav> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 CSS--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <h2>Bootstrap 3 - Navbar Component alignment</h2> <!-- navbar open--> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <!-- tombol untuk membuka dan menutup menu, diarea responsive --> <button data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- Judul --> <a href="#" class="navbar-brand">TrikSonic</a> </div> <div id="navbarCollapse" class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#"> Dropdown <span class="caret"></span> </a> <!-- Dropdown List --> <ul class="dropdown-menu"> <li><a href="#">Sub Menu 1</a></li> <li><a href="#">Sub Menu 2</a></li> <li><a href="#">Sub Menu 3</a></li> <li class="divider"></li> <li><a href="#">Sub Menu 4</a></li> </ul> </li> </ul> <!-- form --> <form class="navbar-form navbar-right"> <input class="form-control" type="text"/> </form> </div> </nav> <!-- navbar close--> <p> Silahkan atur area preview untuk melihat media screen (atau tampilan) </p> <div class="alert alert-warning"> <strong>Catatan :</strong> Penggunaan javascript diharapkan untuk demo ini. </div> <!-- jquery dan bootstrap3 js --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
Bootstrap 3 - Navbar Fixed to top
Digunakan untuk menciptakan navbar mempunyai posisi tetap berada di atas dan lepas dari gulir sebuah halaman
Untuk menerapkannya tambahkan class
.navbar-fixed-top pada class dasar .navbarContoh
<nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a href="#" class="navbar-brand">TrikSonic</a> </div> <!-- code anda selanjutnya--> </nav> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 CSS--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-header"> <a href="#" class="navbar-brand">TrikSonic</a> </div> <!-- code anda selanjutnya--> </nav> <!--hanya untuk demo--> <div style="background:pink;height:300px;margin:70px 0px 20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> </body> </html>
Bootstrap 3 - Navbar Fixed to bottom
Digunakan untuk menciptakan navbar mempunyai posisi tetap berada di bawah dan lepas dari gulir sebuah halaman
Untuk menerapkannya tambahkan class
.navbar-fixed-bottom pada class dasar .navbarContoh
<nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="navbar-header"> <a href="#" class="navbar-brand">TrikSonic</a> </div> <!-- code anda selanjutnya--> </nav> <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"/> <title>Triksonic Demo Bootstrap 3</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!--Bootstrap 3 CSS--> <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'/> </head> <body class="container"> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="navbar-header"> <a href="#" class="navbar-brand">TrikSonic</a> </div> <!-- code anda selanjutnya--> </nav> <!--hanya untuk demo--> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:red;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px">Demo</div> <div style="background:pink;height:300px;margin:20px 0px 70px 0px">Demo</div> </body> </html>