نوار Navigation

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp3-menu.png
موارد آموزشی
۱خانه
۲شروع
۳شبکه‌بندی ساده
۴تایپوگرافی
۵جدول‌ها
۶تصویر‌ها
۷Jumbotron
۸Well‌ها
۹هشدارها
۱۰کلیدها
۱۱گروه‌های کلید
۱۲گلیف آیکون‌ها
۱۳نشان‌ها/برچسب‌ها
۱۴نوار پیشرفت
۱۵صفحه‌بندی
۱۶Pager
۱۷گروه‌های لیست
۱۸پنل‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱تب‌ها/Pillها
۲۲نوار راهبری
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵ورودی‌ها ۲
۲۶سایزدهی ورودی
۲۷Media Objectها
۲۸Carousel
۲۹Modal
۳۰راهنمای ابزار
۳۱Popover
۳۲Scrollspy
۳۳Affix
۳۴فیلترها
شبکه‌بندی
زمینه‌ها
مثال‌ها
مرجع JavaScrpit در بوت‌استرپ ۳
مرجع CSS در بوت‌استرپ ۳


نوار Navigation یک سرفصل راه‌بردی است که در بالای صفحه قرار می‌گیرد. (منویی که در بالای صفحات یک وب سایت قرار می‌گیرد معمولاً با نام Navigation Bar شناخته می‌شود)[۱]

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


بوسیلهٔ بوت استرپ، یک نوار Navigation را بسته به اندازه صفحه نمایش، می‌توان باز یا بسته کرد.

یک نوار Navigation معمولی با <nav class="navbar navbar-default"> ایجاد می‌شود.

مثال زیر نحوهٔ اضافه کردن نوار Navigation را در بالای صفحه نشان می‌دهد:

مثال

 1 <nav class="navbar navbar-default">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Page 1</a></li>
 9       <li><a href="#">Page 2</a></li>
10       <li><a href="#">Page 3</a></li>
11     </ul>
12   </div>
13 </nav>
14 ...

مشاهدهٔ نتیجه

توجه: همه یمثال‌های این صفحه نوار Navigation را نشان می‌دهند که در صفحه نمایش‌های کوچک فضای بسیار زیادی را اشغال می‌کند (با این حال نوار Navigation در صفحه نمایش‌های بزرگ در یک خط قرار خواهد گرفت - زیرا بوت استرپ واکنش گراست). مشکل (با صفحه نمایش‌های کوچک) در آخرین مثال این صفحه حل خواهد شد.

نوار Navigation معکوس

اگر استایل نوار Navigation پیش فرض را نمی‌پسندید، بوت استرپ جایگزین‌هایی برای شما در نظر گرفته‌است، نوار Navigation سیاه رنگ:Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


فقط کلاس .navbar-default را به کلاس .navbar-inverse تغییر دهید:

مثال

 1 <nav class="navbar navbar-inverse">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Page 1</a></li>
 9       <li><a href="#">Page 2</a></li>
10       <li><a href="#">Page 3</a></li>
11     </ul>
12   </div>
13 </nav>

مشاهدهٔ نتیجه


نوار Navigation با Dropdown

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


نوار Navigation می‌تواند دارای منوی کرکره‌ای نیز باشد.

مثال زیر یک منوی کرکره‌ای را به کلید "Page 1" اضافه می‌کند:

مثال

 1 <nav class="navbar navbar-inverse">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li class="dropdown">
 9         <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
10         <span class="caret"></span></a>
11         <ul class="dropdown-menu">
12           <li><a href="#">Page 1-1</a></li>
13           <li><a href="#">Page 1-2</a></li>
14           <li><a href="#">Page 1-3</a></li>
15         </ul>
16       </li>
17       <li><a href="#">Page 2</a></li>
18       <li><a href="#">Page 3</a></li>
19     </ul>
20   </div>
21 </nav>

مشاهدهٔ نتیجه


نوار Navigation راست-چین

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


کلاس .navbar-right برای راست-چین کردن کلیدهای نوار Navigation به کار می‌رود.

در مثال زیر، یک کلید “Sign Up” و کلید “Login” در سمت راست نوار Navigation اضافه می‌کنیم. همچنین به هریک از دو کلید جدید یک گلیف آیکون اضافه می‌کنیم:

مثال

 1 <nav class="navbar navbar-inverse">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Page 1</a></li>
 9       <li><a href="#">Page 2</a></li>
10     </ul>
11     <ul class="nav navbar-nav navbar-right">
12       <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
13       <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
14     </ul>
15   </div>
16 </nav>

مشاهدهٔ نتیجه


کلید‌های Navbar

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


برای اضافه کردن کلیدها در داخل Navbar، کلاس .navbar-btn را به کلید بوت استرپ اضافه می‌کنیم:

مثال

 1 <nav class="navbar navbar-inverse">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Link</a></li>
 9       <li><a href="#">Link</a></li>
10     </ul>
11     <button class="btn btn-danger navbar-btn">Button</button>
12   </div>
13 </nav>

مشاهدهٔ نتیجه


فرم های Navbar

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


برای ایجاد عناصر داخل Navbar، کلاس .navbar-form را به یک عنصر فرم اضافه کرده و یک یا چند ورودی نیز اضافه می‌کنیم. توجه داشته باشید که یک کلاس .form-group را به div دربردارندهٔ ورودی اضافه کرده‌ایم. با این کار اگر بیش از یک ورودی داشته باشیم، لایه (به انگلیسی: padding) مناسب را ایجاد می‌کند (در بخش فرم‌ها در این زمینه بیشتر خواهید آموخت).

مثال

 1 <nav class="navbar navbar-inverse">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Page 1</a></li>
 9       <li><a href="#">Page 2</a></li>
10     </ul>
11     <form class="navbar-form navbar-left" action="/action_page.php">
12       <div class="form-group">
13         <input type="text" class="form-control" placeholder="Search">
14       </div>
15       <button type="submit" class="btn btn-default">Submit</button>
16     </form>
17   </div>
18 </nav>

مشاهدهٔ نتیجه


همچنین می‌توانید برای قرار دادن یک آیکون با متن راهنما در کنار فیلد ورودی، از کلاس‌های .input-group یا .input-group-addonاستفاده کنید. در مورد این کلاس‌ها در بخش ورودی‌های بوت استرپ بیشتر خواهید آموخت.

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مثال

 1 <form class="navbar-form navbar-left" action="/action_page.php">
 2   <div class="input-group">
 3     <input type="text" class="form-control" placeholder="Search">
 4     <div class="input-group-btn">
 5       <button class="btn btn-default" type="submit">
 6         <i class="glyphicon glyphicon-search"></i>
 7       </button>
 8     </div>
 9   </div>
10 </form>

مشاهدهٔ نتیجه


Navbar متنی

·Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


از کلاس .navbar-text برای قرار دادن عمودی هر عنصری که لینک نیست در داخل Navbar استفاده کنید (حاشیه و رنگ متن مناسب را تضمین می‌کند):

مثال

1 <nav class="navbar navbar-inverse">
2   <ul class="nav navbar-nav">
3     <li><a href="#">Link</a></li>
4     <li><a href="#">Link</a></li>
5   </ul>
6   <p class="navbar-text">Some text</p>
7 </nav>

مشاهدهٔ نتیجه


نوار Navigation ثابت

نوار Navigation می‌تواند در بالای صفحه یا در پایین آن ثابت باشد.

نوار Navigation ثابت در یک مکان ثابت (بالا یا پایین) مستقل از پیمایش صفحه (به انگلیسی: Scroll) قابل مشاهده می‌ماند.

کلاس .navbar-fixed-top نوار Navigation را در بالای صفحه ثابت می‌کند:

مثال

 1 <nav class="navbar navbar-inverse navbar-fixed-top">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Page 1</a></li>
 9       <li><a href="#">Page 2</a></li>
10       <li><a href="#">Page 3</a></li>
11     </ul>
12   </div>
13 </nav>

مشاهدهٔ نتیجه


کلاس .navbar-fixed-bottom نوار را در پایین صفحه نگه می‌دارد:

مثال

 1 <nav class="navbar navbar-inverse navbar-fixed-bottom">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <a class="navbar-brand" href="#">WebSiteName</a>
 5     </div>
 6     <ul class="nav navbar-nav">
 7       <li class="active"><a href="#">Home</a></li>
 8       <li><a href="#">Page 1</a></li>
 9       <li><a href="#">Page 2</a></li>
10       <li><a href="#">Page 3</a></li>
11     </ul>
12   </div>
13 </nav>

مشاهدهٔ نتیجه


جمع کردن (به انگلیسی: Collapsing) نوار Navigation

نوار Navigation اغلب فضای زیادی را در صفحه نمایش کوچک اشغال می‌کند.

باید نوار Navigation را پنهان کنیم؛ و فقط در زمانی که نیاز است ظاهر شود.

در مثال زیر نوار Navigation یا یک کلید در گوشهٔ راست بالا جایگزین می‌شود. تنها هنگامی که روی کلید کلیک شود، نوار Navigation ظاهر خواهد شد:

مثال

 1 <nav class="navbar navbar-inverse">
 2   <div class="container-fluid">
 3     <div class="navbar-header">
 4       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
 5         <span class="icon-bar"></span>
 6         <span class="icon-bar"></span>
 7         <span class="icon-bar"></span>
 8       </button>
 9       <a class="navbar-brand" href="#">WebSiteName</a>
10     </div>
11     <div class="collapse navbar-collapse" id="myNavbar">
12       <ul class="nav navbar-nav">
13         <li class="active"><a href="#">Home</a></li>
14         <li><a href="#">Page 1</a></li>
15         <li><a href="#">Page 2</a></li>
16         <li><a href="#">Page 3</a></li>
17       </ul>
18       <ul class="nav navbar-nav navbar-right">
19         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
20         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
21       </ul>
22     </div>
23   </div>
24 </nav>

مشاهدهٔ نتیجه


تمرینات بوت استرپ

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.



منابع آموزشی