پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
در این مبحث به آموزش نوار منوها navigation در بوت استرپ 4 میپردازیم.
انواع کلاس های زیبا و آماده ی کار با منوها در بوت استرپ به صورت پیشرفته تر با گزینه های بیشتر را با مثال هایش توضیح میدهیم.
با عرض سلام و وقت بخیر خدمت شما کاربران گرامی وب سایت پرنیان طرح
در این مبحث با آموزش بخش نوار منوها در بوت استرپ همراه ما باشید.
نوار منوها (Nav Menus) :
اگر میخواهید یک منوی افقی ساده ایجاد کنید ، کلاس nav. را به یک عنصر ul اضافه کنید.
و در ادامه کلاس nav-item. را به عنصر li اضافه کنید و کلاس nav-link. را به لینک های خود اضافه کنید.
مثال:
[php]
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
[/php]
خروجی مثال بالا را در تصویر زیر ببینید :
جهت نوار منوها (Aligned Nav) :
شما میتوانید جهت قرار گرفتن نوار منوها را مشخص کنید میتوانید آن را در سمت چپ ، راست و یا وسط قرار دهید.
برای توضیح بیشتر مثال زیر را ببینید:
[php]
<ul class=”nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
<p class=”text-center”>Centered nav:</p>
<ul class=”nav justify-content-center”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
<p class=”text-right”>Right-aligned nav:</p>
<ul class=”nav justify-content-end”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
[/php]
تصویر مثال بالا :
نوار منوی عمودی (Vertical Nav) :
برای ایجاد نوار منوی عمودی کلاس flex-column. را به عنصر موجود اضافه کنید.
مثال :
[php]
<ul class=”nav flex-column”>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
[/php]
تصویر نوار منوی عمودی :
زبانه ها (Tabs) :
میتوانید ظاهر نوار منویی را تغییر دهیید با استفاده از کلاس nav-tabs. یک خط زیر نوار منوی ایجا کنید.
مثال:
[php]
<ul class=”nav nav-tabs”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
[/php]
تصویر مثال بالا:
نوارهای منویی جدا از هم (Nav Pills) :
با استفاده از کلاس nav-pills. منوی nav را به نوار منوی جدا از هم تبدیل کنبد.
مثال :
[php]
<ul class=”nav nav-pills”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
[/php]
مانند تصویر زیر:
نوارهای جداگانه با منوهای کشویی (Pilles With Dropdowns) :
شما میتوانید نوار منوی جداگانه را با نوار منوی کشویی ترکیب کنید.
مثال :
[php]
<ul class=”nav nav-pills”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” data-toggle=”dropdown” href=”#”>Dropdown</a>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
<a class=”dropdown-item” href=”#”>Link 3</a></div>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
</div>
[/php]
مانند آنچه در تصویر زیر میبینید :
Tabs with Dropdown:
میتوانید کلاس nav-tabs. و کلاس های dropdown را باهم ترکیب کنید و نوار منوی مانند مثال زیر ایجاد کنید.
مثال:
[php]
<ul class=”nav nav-tabs”>
<li class=”nav-item”>
<a class=”nav-link active” href=”#”>Active</a>
</li>
<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” data-toggle=”dropdown” href=”#”>Dropdown</a>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
<a class=”dropdown-item” href=”#”>Link 3</a></div>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”#”>Link</a>
</li>
<li class=”nav-item”>
<a class=”nav-link disabled” href=”#”>Disabled</a>
</li>
</ul>
[/php]
تصویر مثال بالا :
زبانه های قابل تنظیم :
میتوانید به زبانه ها ویژگی قابل تغییر بودن را اضافه کنید با افزودن ویژگی data-toggle=”tab” به هر عنصر این قابلیت را ایجاد کنید.
برای توضیح بیشتر مثال زیر را ببینید.
مثال:
[php]
<ul class=”nav nav-tabs” role=”tablist”>
<li class=”nav-item”>
<a class=”nav-link active” data-toggle=”tab” href=”#home”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” data-toggle=”tab” href=”#menu1″>Menu 1</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” data-toggle=”tab” href=”#menu2″>Menu 2</a>
</li>
</ul>
[/php]
تصویر زبانه های پویا:
