نوار راهبری

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکون‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

Navbar ساده

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

یک نوار راهبری استاندار بوسیله کلاس .navbar ایجاد می‌شود، به همراه یکی از کلاس‌های پنهان شدن (به انگلیسی: Collapsing) با نام: .navbar-expand-xl|lg|md|sm (که در صفحه نمایش‌های خیلی بزرگ، بزرگ، متوسط و کوچک، navbar بطور عمودی روی هم قرار می‌گیرد).

برای اضافه کردن لینک‌های داخل navbar از عنصر <ul> با کلاس class="navbar-nav" استفاده می شود. سپس عنصرهای <li> را با کلاس .nav-item به همراه یک عنصر <a> با کلاس .nav-link اضافه می شوند:

مثال

 1 <!-- A grey horizontal navbar that becomes vertical on small screens -->
 2 <nav class="navbar navbar-expand-sm bg-light">
 3 
 4   <!-- Links -->
 5   <ul class="navbar-nav">
 6     <li class="nav-item">
 7       <a class="nav-link" href="#">Link 1</a>
 8     </li>
 9     <li class="nav-item">
10       <a class="nav-link" href="#">Link 2</a>
11     </li>
12     <li class="nav-item">
13       <a class="nav-link" href="#">Link 3</a>
14     </li>
15   </ul>
16 
17 </nav>


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


Navbar عمودی

برای ایجاد navbar عمودی کلاس‌های .navbar-expand-xl را حذف کنید:

مثال

 1 <!-- A vertical navbar -->
 2 <nav class="navbar bg-light">
 3 
 4   <!-- Links -->
 5   <ul class="navbar-nav">
 6     <li class="nav-item">
 7       <a class="nav-link" href="#">Link 1</a>
 8     </li>
 9     <li class="nav-item">
10       <a class="nav-link" href="#">Link 2</a>
11     </li>
12     <li class="nav-item">
13       <a class="nav-link" href="#">Link 3</a>
14     </li>
15   </ul>
16 
17 </nav>


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


Navbar وسط‌چین

می‌توان برای وسط-چین کردن نوار راهبری کلاس .justify-content-center را اضافه کرد.

مثال زیر نوار راهبری را در صفحه نمایش‌های متوسط، بزرگ و خیلی بزرگ، وسط-چین می‌کند. در صفحه نمایش‌های کوچک بصورت عمودی و چپ-چین نمایش داده خواهد شد (به دلیل وجود کلاس .navbar-expand-sm):

مثال

1 <nav class="navbar navbar-expand-sm bg-light justify-content-center">
2   ...
3 </nav>


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


Navbar رنگی

می‌توان از هر یک از کلاس‌های .bg-color برای تغییر رنگ پیش زمینه navbar استفاده کرد (.bg-primary ,.bg-success ,.bg-info ,.bg-warning ,.bg-danger, .bg-secondary ,.bg-dark و.bg-light)

نکته: با کلاس .navbar-dark رنگ متن سفید یا با استفاده از کلاس .navbar-light رنگ متن مشکی به همهٔ لینک‌های navbar اضافه می‌شود.

مثال

 1 <!-- Grey with black text -->
 2 <nav class="navbar navbar-expand-sm bg-light navbar-light">
 3   <ul class="navbar-nav">
 4     <li class="nav-item active">
 5       <a class="nav-link" href="#">Active</a>
 6     </li>
 7     <li class="nav-item">
 8       <a class="nav-link" href="#">Link</a>
 9     </li>
10     <li class="nav-item">
11       <a class="nav-link" href="#">Link</a>
12     </li>
13     <li class="nav-item">
14       <a class="nav-link disabled" href="#">Disabled</a>
15     </li>
16   </ul>
17 </nav>
18 
19 <!-- Black with white text -->
20 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
21 
22 <!-- Blue with white text -->
23 <nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>


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


حالت فعال/غیرفعال: با اضافه کردن کلاس .active به عنصر <a> لینک موردنظر برجسته (به انگلیسی: Highlight) می‌شود یا با اضافه کردن کلاس .disabled برای غیرقابل کلیک کردن لینک به کار می‌رود.

برند / لوگو

کلاس .navbar-brand برای برجسته‌کردن برند / لوگو / نام پروژه، صفحه به کار می‌رود:

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
2   <a class="navbar-brand" href="#">Logo</a>
3   ...
4 </nav>


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


هنگام استفاده از کلاس .navbar-brand برروی تصاویر، بوت استرپ ۴ بطور خودکار تصویر را برای تطبیق عمودی با navbar استایل دهی می‌کند.

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
2    <a class="navbar-brand" href="#">
3     <img src="bird.jpg" alt="Logo" style="width:40px;">
4   </a>
5   ...
6 </nav>


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


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

اغلب اوقات، مخصوصاً در صفحه نمایش‌های کوچک، می‌خواهید لینک‌های نوار راهبری را پنهان کرده و آنها را با کلیدهایی جایگزین کنید که هنگام کلیک لینک‌ها را آشکار کنند.

برای ایجاد نوار راهبری پنهان شدنی (به انگلیسی: Collapsible) از کلیدی با class="navbar-toggler", data-toggle="collapse" and data-target="#thetarget" استفاده کنید. سپس محتوای navbar (لینک‌ها و غیره) را داخل یک عنصر div با class="collapse navbar-collapse" به همراه یک آی دی مطابق با data-target قرار دهید: "thetarget".

مثال

 1 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
 2   <!-- Brand -->
 3   <a class="navbar-brand" href="#">Navbar</a>
 4 
 5   <!-- Toggler/collapsibe Button -->
 6   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
 7     <span class="navbar-toggler-icon"></span>
 8   </button>
 9 
10   <!-- Navbar links -->
11   <div class="collapse navbar-collapse" id="collapsibleNavbar">
12     <ul class="navbar-nav">
13       <li class="nav-item">
14         <a class="nav-link" href="#">Link</a>
15       </li>
16       <li class="nav-item">
17         <a class="nav-link" href="#">Link</a>
18       </li>
19       <li class="nav-item">
20         <a class="nav-link" href="#">Link</a>
21       </li>
22     </ul>
23   </div>
24 </nav>


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


نکته: همچنین می‌توانید کلاس .navbar-expand-md را حذف کنید تا لینک‌های navbar همیشه پنهان شده و کلید تغییر کننده را نمایش دهد.

Navbar با منوی کرکره ای (به انگلیسی: Dropdown)

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

مثال

 1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 2   <!-- Brand -->
 3   <a class="navbar-brand" href="#">Logo</a>
 4 
 5   <!-- Links -->
 6   <ul class="navbar-nav">
 7     <li class="nav-item">
 8       <a class="nav-link" href="#">Link 1</a>
 9     </li>
10     <li class="nav-item">
11       <a class="nav-link" href="#">Link 2</a>
12     </li>
13 
14     <!-- Dropdown -->
15     <li class="nav-item dropdown">
16       <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
17         Dropdown link
18       </a>
19       <div class="dropdown-menu">
20         <a class="dropdown-item" href="#">Link 1</a>
21         <a class="dropdown-item" href="#">Link 2</a>
22         <a class="dropdown-item" href="#">Link 3</a>
23       </div>
24     </li>
25   </ul>
26 </nav>


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


کلیدها و فرم های Navbar

به‌منظور گروه‌بندی ورودی‌ها و کلیدها در کنار هم یک عنصر <form> با class="form-inline" را اضافه کنید:

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
2   <form class="form-inline" action="/action_page.php">
3     <input class="form-control mr-sm-2" type="text" placeholder="Search">
4     <button class="btn btn-success" type="submit">Search</button>
5   </form>
6 </nav>


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


همچنین می‌توانید برای چسباندن یک آیکون یا متن راهنما در کنار فیلد ورودی، از کلاس‌های ورودی دیگر نیز استفاده کنید مانند .input-group-prepend یا .input-group-append.

در مورد این کلاس‌ها در بخش ورودی‌های بوت استرپ بیشتر خواهید آموخت.

مثال

 1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 2   <form class="form-inline" action="/action_page.php">
 3     <div class="input-group">
 4       <div class="input-group-prepend">
 5         <span class="input-group-text">@</span>
 6       </div>
 7       <input type="text" class="form-control" placeholder="Username">
 8     </div>
 9   </form>
10 </nav>


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


متن Navbar

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

مثال

 1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 2 
 3 <!-- Links -->
 4   <ul class="navbar-nav">
 5     <li class="nav-item">
 6       <a class="nav-link" href="#">Link 1</a>
 7     </li>
 8     <li class="nav-item">
 9       <a class="nav-link" href="#">Link 2</a>
10     </li>
11   </ul>
12 
13   <!-- Navbar text-->
14   <span class="navbar-text">
15     Navbar text
16   </span>
17 
18 </nav>


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


نوار Navigation ثابت

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

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

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

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
2   ...
3 </nav>


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


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

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-bottom">
2   ...
3 </nav>


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


برای ثابت کردن navbar در بالای صفحه هنگام پیمایش و گذشتن از آن، از کلاس .sticky-top استفاده کنید.

<translate> نکته</translate>  نکته: این کلاس در IE11 و نسخه‌های قدیمی‌تر اجرا نمی‌شود (بعنوان position:relative با آن برخورد می‌شود).

مثال

1 <nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
2   ...
3 </nav>


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



منابع آموزشی