آموزش منوهای کشویی (Dropdowns) در بوت استرپ

بهاره حسنیبهاره حسنی
245 بازدید

منو های کشویی منوی قابل جا به جایی است که به کاربر اجازه می دهد یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند.

لیست ها در بوت استرپ این امکان را دارند که یک مقدار را از بین چندین مقدار انتخاب کند.

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

 

با سلام خدمت کاربران عزیز وب سایت پرنیان طرح

در این آموزش میخواهیم منوهای کشویی Dropdowns در بوت استرپ را به شما عزیزان آموزش دهیم.

منوی کشویی ساده (Basic Dropdowns):

منوی کشویی قابل جا به جایی است و به کاربر اجازه میدهد یک مقدار را از یک لیست از پیش تعریف شده انتخاب کند.

در این مثال یک منوی کشویی ساده را تعریف کرده ایم.

مثال :

[php]

<div class=”dropdown”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropdown button
</button>
<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>
</div>

[/php]

تصویر منوی ساده :

basic dropdowns

منوهای (Dropdown Divider):

کلاس dropdown-divider. برای جدا کردن پیوندها در داخل منوی کشویی با یک حاشیه افقی نازک استفاده میشود.

برای توضیح بیشتر به این مثال توجه نمایید:

[php]

<div class=”dropdown”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropdown button
</button>
<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 class=”dropdown-divider”></div>
<a class=”dropdown-item” href=”#”>Another link</a>
</div>
</div>

[/php]

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

dropdown divider

Dropdown Headers:

با استفاده از کلاس dropdown-header. میتوانید هدر را داخل منوی کشویی استفاده کنید.

مثال:

[php]

<div class=”dropdown”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropdown button
</button>
<div class=”dropdown-menu”>
<h5 class=”dropdown-header”>Dropdown header</h5>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
<a class=”dropdown-item” href=”#”>Link 3</a>
<h5 class=”dropdown-header”>Dropdown header</h5>
<a class=”dropdown-item” href=”#”>Another link</a>
</div>

</div>

[/php]

تصویر dropdown header :

dropdown header

آیتم های فعال و غیر فعال:

برای برجسته کردن یک مورد در منوی کشویی با کلاس active. به آن یک پس زمینه آبی اضافه میکند.

برای غیر فعال کردن یک مورد در منوی کشویی از کلاس disabled. استفاده کنید که یک پس زمینه خاکستری را به آن مورد اضافه میکند.

برای مثال:

[php]

<div class=”dropdown”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropdown button
</button>
<div class=”dropdown-menu”>
<h5 class=”dropdown-header”>Dropdown header</h5>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
<a class=”dropdown-item” href=”#”>Link 3</a>
<h5 class=”dropdown-header”>Dropdown header</h5>
<a class=”dropdown-item” href=”#”>Another link</a>
</div>
</div>
[/php]

تصویر حالت فعال و غیر فعال:

active dropdowns

موقعیت منوی کشویی(Dropdown position):

شما میتوانید با افزودن کلاس dropdown-right. و dropdown-left. به عنصر کشویی منوی کشویی از سمت راست یا چپ را ایجاد کنید.

برای توضیح بیشتر به مثال زیر توجه کنید منوی کشویی از سمت راست:

[php]

<div class=”dropdown dropright”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropright button
</button>
<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>
</div>

[/php]

تصویر منوی کشویی سمت راست:

drop right button

منوی کشویی از چپ:

[php]

<div class=”dropdown dropleft float-right”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropleft button
</button>
<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>
</div>

[/php]

تصویر منوی کشویی از سمت چپ:

drop left button

منوی کشویی از سمت بالا (Dropup):

اگر میخواهید که منوی کشویی بجای پایین به سمت بالا گسترش یابد کلاس dropup را به آن اضافه کنید.

مثال:

[php]

<div class=”dropup”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Dropup button
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>

[/php]

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

dropup

گروه دکمه ها به همراه منوی کشویی :

میتوان گروهی از دکمه ها را ایجاد کرد که یکی از آن ها منوی کشویی داشته باشد.

برای مثال:

[php]

<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Sony
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Tablet</a>
<a class=”dropdown-item” href=”#”>Smartphone</a>
</div>
</div>
</div>

[/php]

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

nesting button groups

منوهای کشویی رنگی :

شما میتوانید از منو های کشویی رنگی در بوت استرپ استفاده نمایید.

در این مثال انواع این منوها را ببیند:

[php]

<div class=”container”>
<h2>Dropdown Split Buttons</h2>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary”>Primary</button>
<button type=”button” class=”btn btn-primary dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>

<div class=”btn-group”>
<button type=”button” class=”btn btn-secondary”>Secondary</button>
<button type=”button” class=”btn btn-secondary dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>

<div class=”btn-group”>
<button type=”button” class=”btn btn-success”>Success</button>
<button type=”button” class=”btn btn-success dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>

<div class=”btn-group”>
<button type=”button” class=”btn btn-info”>Info</button>
<button type=”button” class=”btn btn-info dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>

<div class=”btn-group”>
<button type=”button” class=”btn btn-warning”>Warning</button>
<button type=”button” class=”btn btn-warning dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>

<div class=”btn-group”>
<button type=”button” class=”btn btn-danger”>Danger</button>
<button type=”button” class=”btn btn-danger dropdown-toggle dropdown-toggle-split” data-toggle=”dropdown”>
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Link 1</a>
<a class=”dropdown-item” href=”#”>Link 2</a>
</div>
</div>
</div>

[/php]

dropdoen split

گروه منوی کشویی عمودی :

میتوانید منوهای کشویی را به صورت عمودی ایجاد کنید.

مثال:

[php]

<div class=”btn-group-vertical”>
<button type=”button” class=”btn btn-primary”>Apple</button>
<button type=”button” class=”btn btn-primary”>Samsung</button>
<div class=”btn-group”>
<button type=”button” class=”btn btn-primary dropdown-toggle” data-toggle=”dropdown”>
Sony
</button>
<div class=”dropdown-menu”>
<a class=”dropdown-item” href=”#”>Tablet</a>
<a class=”dropdown-item” href=”#”>Smartphone</a>
</div>
</div>
</div>

[/php]

تصویر منوی کشویی عمودی:

vertical button groups

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

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

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

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

22+ محصولات
400+ سفارشات تکمیل شده
2086+ کاربران
399+ مطالب وبلاگ
سبد خرید

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

ورود به سایت