Navها

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


منوهای Nav

اگر می‌خواهید یک منوی افقی ساده ایجاد کنید، کلاس .nav را به عنصر <ul> به همراه .nav-item به ازاء هر <li> اضافه کرده و کلاس .nav-link را به لینک آنها اضافه کنید:[۱]

مثال

 1 <ul class="nav">
 2   <li class="nav-item">
 3     <a class="nav-link" href="#">Link</a>
 4   </li>
 5   <li class="nav-item">
 6     <a class="nav-link" href="#">Link</a>
 7   </li>
 8   <li class="nav-item">
 9     <a class="nav-link" href="#">Link</a>
10   </li>
11   <li class="nav-item">
12     <a class="nav-link disabled" href="#">Disabled</a>
13   </li>
14 </ul>

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


Aligned Nav

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

مثال

1 <!-- Centered nav -->
2 <ul class="nav justify-content-center">
3 
4 <!-- Right-aligned nav -->
5 <ul class="nav justify-content-end">

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


Nav عمودی

کلاس .flex-column را برای ایجاد nav عمودی به کار ببرید:

مثال

<ul class="nav flex-column">

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


تب ها

با کلاس .nav-tabs منوی nav را به تب‌های راهبردی (به انگلیسی: Navigation) تبدیل کنید. کلاس .active را به لینک فعال/ فعلی اضافه کنید. اگر می‌خواهید تب togglable باشد، به آخرین این صفحه مراجعه کنید.

مثال

 1 <ul class="nav nav-tabs">
 2   <li class="nav-item">
 3     <a class="nav-link active" href="#">Active</a>
 4   </li>
 5   <li class="nav-item">
 6     <a class="nav-link" href="#">Link</a>
 7   </li>
 8   <li class="nav-item">
 9     <a class="nav-link" href="#">Link</a>
10   </li>
11   <li class="nav-item">
12     <a class="nav-link disabled" href="#">Disabled</a>
13   </li>
14 </ul>

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


Pillها

بوسیله کلاس .nav-pills منوی nav را به Pillهای راهبردی (به انگلیسی: Navigation Pills) تبدیل کنید. اگر می‌خواهید pillها togglable باشند، به آخرین این صفحه مراجعه کنید.

مثال

 1 <ul class="nav nav-pills">
 2   <li class="nav-item">
 3     <a class="nav-link active" href="#">Active</a>
 4   </li>
 5   <li class="nav-item">
 6     <a class="nav-link" href="#">Link</a>
 7   </li>
 8   <li class="nav-item">
 9     <a class="nav-link" href="#">Link</a>
10   </li>
11   <li class="nav-item">
12     <a class="nav-link disabled" href="#">Disabled</a>
13   </li>
14 </ul>

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


Pillها / تب های Justify شده

تب‌ها /pillها را با کلاس .nav-justified (عرض برابر) Justify کنید:

مثال

1 <ul class="nav nav-pills nav-justified">..</ul>
2 <ul class="nav nav-tabs nav-justified">..</ul>

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


Pillها با منوی کرکره ای

مثال

 1 <ul class="nav nav-pills">
 2   <li class="nav-item">
 3     <a class="nav-link active" href="#">Active</a>
 4   </li>
 5   <li class="nav-item dropdown">
 6     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
 7     <div class="dropdown-menu">
 8       <a class="dropdown-item" href="#">Link 1</a>
 9       <a class="dropdown-item" href="#">Link 2</a>
10       <a class="dropdown-item" href="#">Link 3</a>
11     </div>
12   </li>
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 disabled" href="#">Disabled</a>
18   </li>
19 </ul>

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


تب ها با منوی کرکره ای

مثال

 1 <ul class="nav nav-tabs">
 2   <li class="nav-item">
 3     <a class="nav-link active" href="#">Active</a>
 4   </li>
 5   <li class="nav-item dropdown">
 6     <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>
 7     <div class="dropdown-menu">
 8       <a class="dropdown-item" href="#">Link 1</a>
 9       <a class="dropdown-item" href="#">Link 2</a>
10       <a class="dropdown-item" href="#">Link 3</a>
11     </div>
12   </li>
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 disabled" href="#">Disabled</a>
18   </li>
19 </ul>

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


تب‌های پویا / Toggleable

اگر می خواهید تب ها را به حالت قابل تغییر (به انگلیسی: toggleable) تبدیل کنید، ویژگی data-toggle="tab" را به هر لینک اضافه کنید. سپس یک کلاس .tab-paneبا ID منحصر بفرد را به همه تب ها اضافه کرده و آنها را داخل یک عنصر <div> با کلاس .tab-content قرار دهید.

اگر می‌خواهید تب‌ها هنگام کلیک برروی آنها محو و آشکار شوند (به انگلیسی: Fade in and out)، کلاس.fade را به .tab-pane اضافه کنید:

مثال

 1 <!-- Nav tabs -->
 2 <ul class="nav nav-tabs">
 3   <li class="nav-item">
 4     <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
 5   </li>
 6   <li class="nav-item">
 7     <a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a>
 8   </li>
 9   <li class="nav-item">
10     <a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a>
11   </li>
12 </ul>
13 
14 <!-- Tab panes -->
15 <div class="tab-content">
16   <div class="tab-pane container active" id="home">...</div>
17   <div class="tab-pane container fade" id="menu1">...</div>
18   <div class="tab-pane container fade" id="menu2">...</div>
19 </div>

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


Pillهای پویا / Togglable

همان کد برای pillها اعمال می‌شود؛ فقط باید ویژگی data-toggle به data-toggle="pill" تغییر داده شود:

مثال

 1 <!-- Nav pills -->
 2 <ul class="nav nav-pills">
 3   <li class="nav-item">
 4     <a class="nav-link active" data-toggle="pill" href="#home">Home</a>
 5   </li>
 6   <li class="nav-item">
 7     <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a>
 8   </li>
 9   <li class="nav-item">
10     <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a>
11   </li>
12 </ul>
13 
14 <!-- Tab panes -->
15 <div class="tab-content">
16   <div class="tab-pane container active" id="home">...</div>
17   <div class="tab-pane container fade" id="menu1">...</div>
18   <div class="tab-pane container fade" id="menu2">...</div>
19 </div>

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


مرجع کامل Nav بوت استرپ ۴

برای دسترسی به همهٔ امکانات تب، متدها و رویدادها (Events) به مرجع کامل تب JS بوت استرپ 4 ما مراجعه کنید.


منابع آموزشی