نوار منوها (Navs) در بوت استرپ

بهاره حسنیبهاره حسنی
107 بازدید
نوار منوها
[cdb_box_content css=”.vc_custom_1571559073622{background-color: #1e73be !important;}”]

در این مبحث به آموزش نوار منوها navigation در بوت استرپ ۴ میپردازیم.

انواع کلاس های زیبا و آماده ی کار با منوها در بوت استرپ به صورت پیشرفته تر با گزینه های بیشتر را با مثال هایش توضیح میدهیم.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت شما کاربران گرامی وب سایت پرنیان طرح

در این مبحث با آموزش بخش نوار منوها در بوت استرپ همراه ما باشید.

نوار منوها (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]

خروجی مثال بالا را در تصویر زیر ببینید :

nav

جهت نوار منوها (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]

تصویر مثال بالا :

aligned nav

نوار منوی عمودی (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]

تصویر نوار منوی عمودی :

vertical nav

زبانه ها (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]

تصویر مثال بالا:

navigation tab

نوارهای منویی جدا از هم (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]

مانند تصویر زیر:

navigation pills

نوارهای جداگانه با منوهای کشویی (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]

مانند آنچه در تصویر زیر میبینید :

pills with dropdow

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]

تصویر مثال بالا :

tabs with dropdown

زبانه های قابل تنظیم :

میتوانید به زبانه ها ویژگی قابل تغییر بودن را اضافه کنید با افزودن ویژگی 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]

تصویر زبانه های پویا:

toggleable tabs

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

30+ محصولات
232+ سفارشات تکمیل شده
1701+ کاربران
396+ مطالب وبلاگ

پرداخت آنلاین

عضویت در خبرنامه

با عضویت در خبرنامه از آخرین پیشنهادها و تخفیف های ما زودتر از بقیه با خبر شوید!

نمادهای ما

نماد اعتماد
ساماندهی
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت