نوار پیمایش یا همان navigation bar به صورت یک هدر است که در بالای صفحه قرار می گیرد:
به کمک Bootstrap ، نوار پیمایش می تواند بسته به اندازه صفحه نمایش گسترده شود یا اینکه از خاصیت collapse (نمایش/عدم نمایش) استفاده کند.
یک نوار پیمایش استاندارد توسط کد <"nav class="navbar navbar-default> ایجاد می شود.
مثال زیر نشان می دهد که چگونه باید یک نوار پیمایش را به بالای صفحه اضافه کنیم :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</div>
</nav>
<div class="container">
<h3>Basic Navbar Example</h3>
<p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>
</body>
</html>
تمام مثال های این صفحه نوار پیمایشی را نشان می دهند که فضای زیادی را در صفحات نمایش کوچک اشغال می کند (اما نوار پیمایش در یک خط در بالای صفحه قرار خواهد گرفت- زیرا Bootstrap واکنش گرا است ). مشکل صفحات نمایش کوچک در مثال آخر همین صفحه برطرف خواهد شد.
نوار پیمایش معکوس
اگر استایل نوار پیمایش پیش فرض را دوست ندارید ، Bootstrap یک جایگزین برای آن ارائه داده : نوار پیمایش مشکی (black navbar)
کافی است کلاس navbar-default. را با کلاس navbar-inverse. جایگزین کنید :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</div>
</nav>
<div class="container">
<h3>Inverted Navbar</h3>
<p>An inverted navbar is black instead of gray.</p>
</div>
</body>
</html>
نوار پیمایش ثابت
نوار پیمایش می تواند در بالا یا پایین صفحه به صورت ثابت (fixed) در بیاید.
یک نوار پیمایش ثابت در یک مکان ثابت (بالا یا پایین) باقی می ماند بدون توجه به اسکرول صفحه.
کلاس navbar-fixed-top. نوار پیمایش را در بالای صفحه ثابت می کند :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</div>
</nav>
<div class="container">
<h3>Fixed Navbar</h3>
<div class="row">
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="col-md-3">
<p>A fixed navigation bar stays visible in a fixed position (top or bottom) independent of the page scroll.</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
کلاس navbar-fixed-bottom. نوار پیمایش را در پایین صفحه ثابت می کند :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</div>
</nav>
<div class="container">
<h3>Fixed Bottom Navbar</h3>
<div class="row">
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="col-md-3">
<p>The .navbar-fixed-bottom class makes the navigation bar stay at the bottom.</p>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
نوار پیمایش با لیست کشویی
نوارهای پیمایش می توانند منوهای کشویی در خود داشته باشند.
در مثال زیر یک منوی کشویی را به دکمه "Page 1" اضافه می کنیم :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
</div>
</nav>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>
</body>
</html>
نوار پیمایش راست چین
برای اینکه دکمه های نوار پیمایش را به صورت راست چین در بیاورید می توانید از کلاس navbar-right. استفاده کنید.
در مثال زیر ما یک دکمه "Sign Up" و یک دکمه "Login" را در سمت راست نوار پیمایش اضافه می کنیم. همچنین برای هر دکمه یک آیکن قرار داده ایم :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<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>
<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>
<div class="container">
<h3>Right Aligned Navbar</h3>
<p>The .navbar-right class is used to right-align navigation bar buttons.</p>
</div>
</body>
</html>
استفاده از خاصیت Collapse در نوار پیمایش
نوار پیمایش در یک صفحه نمایش کوچک فضای زیادی را اشغال می کند.
به همین دلیل نوار پیمایش باید را پنهان شود و فقط در مواقعی که مورد نیاز است نمایش داده شود.
در مثال زیر نوار پیمایش توسط یک دکمه در گوشه بالای سمت راست جایگزین می شود. یعنی فقط زمانی که روی دکمه کلیک کنیم نوار پیمایش نمایش داده می شود :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<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 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>
<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>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>