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

بهاره حسنیبهاره حسنی
461 بازدید
نوار منوها
[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

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

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

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

نشانی ایمیل شما منتشر نخواهد شد.

سبد خرید

سبد خرید شما خالی است.

ورود به سایت