آموزش طراحی سایت-کار با منوی کرکره ای Dropdown در بوت استرپ 4

سلام با آموزش Bootstrap 4 در خدمت شما هستیم در قسمت قبل با مفاهیم زیر آشنا شدیم

• آموزش کار با لیست گروهی List Group
• آموزش کار با کارت Card در Bootstrap 4
• حال با ادامه آموزش بوت استرپ 4 از دوره آموزش طراحی سایت همراه باشید:

آموزش کار با منوی کرکره ای Dropdown در Bootstrap4

آموزش ساخت منوی کرکره ای ساده Dropdown Basic:

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

مثال عملی: برای ایجاد یک Dropdown ساده در بوت استرپ 4، از یک المنت با کلاس Dropdown به صورت زیر استفاده می شود :

مثال 1

<div class=&quotdropdown&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary dropdown-toggle&quot data-toggle=&quotdropdown&quot>

    Dropdown button

  </button>

  <div class=&quotdropdown-menu&quot>

    <a class=&quotdropdown-item&quot href=&quot#&quot>Link 1</a>

    <a class=&quotdropdown-item&quot href=&quot#&quot>Link 2</a>

    <a class=&quotdropdown-item&quot href=&quot#&quot>Link 3</a>

  </div>

</div>

توضیح مثال: المنت با کلاس Dropdown دربرگیرنده محتویات منوی کرکره ای Dropdown است.

برای قابل کلیک شدن و باز کردن منوی Dropdown، از یک دکمه Button یا لینک با کلاس drop-down-toggle که دارای خاصیت data-toggle=”Dropdown” است، استفاده می شود.

سپس کلاس dropdown-menu. را به یک المنت div اضافه کرده تا منوی اصلی Dropdown ساخته شود. بعد به هر آیتم درون لیست Dropdown که می توانند لینک یا دکمه Button باشند، کلاس dropdown-item. داده می شود.

آموزش طراحی سایت استفاده کننده از جدا کننده Divider در DropDown:

از یک المنت با کلاس dropdown-divider. برای جدا کردن لینک های درون منوی Dropdown با یک خط افقی ضخیم استفاده می شود، همانند کد مثال عملی زیر :

مثال 2

<div class="dropdown-divider"></div>

آموزش ایجاد سر عنوان (Header) برای Dropdown:

از یک المنت با کلاس dropdown-header. برای ایجاد سر عنوان (Header) در منوی Dropdown استفاده می شود، همانند کد مثال عملی زیر:

مثال 3

<div class="dropdown-header">Dropdown header 1</div>

آموزش ایجاد آیتم های فعال/غیر فعال در Dropdown:

اگر به یک آیتم در منوی dropdown کلاس active. اضافه کنید، آن آیتم به صورت فعال (با پس زمینه آبی) نمایش داده می شود.

چنانچه کلاس disabled. را به یک آیتم در منوی dropdown بدهید، آن آیتم به صورت غیر فعال در می آید (رنگ نوشته خاکستری کم رنگ شده و دیگر قابل کلیک شدن نیست).

مثال: در کد مثال عملی زیر، یک عضو منوی DropDown را فعال و عضو دیگر را غیر فعال کرده ایم:

مثال 4

<a class=&quotdropdown-item active&quot href=&quot#&quot>Active</a>

<a class=&quotdropdown-item disabled&quot href=&quot#&quot>Disabled</a>

آموزش تعیین جهت باز شدن Dropdown در بوت استرپ 4:

در بوت استرپ 4، می توان کاری کرد که منوی Dropdown به جای باز شدن به سمت پایین، به سمت چپ یا راست باز شود.

در صورت اضافه کردن کلاس dropright.، منوی Dropdown به سمت راست باز شده و با کلاس dropleft. به سمت چپ باز می شود. دقت نمایید علامت فلش یا arrow به صورت اتوماتیک به منو اضافه می شود. به مثال های عملی زیر دقت نمایید :

مثال 5

<div class=&quotdropdown dropright&quot>Dropright button

<div class=&quotdropdown-menu&quot><a class=&quotdropdown-item&quot href=&quot#&quot>Link 1</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Link 2</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Link 3</a></div>

</div>

<div class=&quotdropdown dropleft&quot>Dropright button

<div class=&quotdropdown-menu&quot><a class=&quotdropdown-item&quot href=&quot#&quot>Link 1</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Link 2</a> <a class=&quotdropdown-item&quot href=&quot#&quot>Link 3</a></div>

</div>

آموزش راست چین کردن منو Dropdown در Bootstrap 4:

در منوی کرکره ای Dropdown عریض تر، می توان کاری کرد که منوی آن از سمت راست باز شود.

برای راست چین کردن منوی Dropdown، بایستی همانند کد مثال عملی زیر، کلاس dropdown-menu-right. را به المنت با کلاس dropdown-menu. (عنصر دربرگیرنده منو)، اضافه نمایید :

مثال 6

<div class=&quotdropdown-menu dropdown-menu-right&quot>

</div>

آموزش باز کردن منو Dropdown رو به بالا در Bootstrap 4:

چنانچه بخواهید منوی Dropdown به جای رو به پایین باز شدن، رو به بالا باز شود، کلاس المنت اصلی Dropdown را از dropdown و dropup. تغییر دهید، همانند کد مثال عملی زیر:

مثال 7

<div class=&quotdropup&quot>

</div>

آموزش تعیین Text برای آیتم DropDown در بوت استرپ 4:

در صورت استفاده از کلاس dropdown-item-text. در یک المنت مثل span یا P در یک آیتم منوی Dropdown، متن آن آیتم به صورت ساده و غیر قابل کلیک شدن در می آید.

اما اگر کلاس فوق را در یک المنت لینک یا Button دکمه برای یک آیتم منو به کار ببرید، آن آیتم به صورت لینک در خواهد آمد.

مثال عملی : در کد مثال عملی زیر، با استفاده از کلاس dropdown-item-text، متن آیتم سوم منوی Dropdown را به صورت لینک و متن آیتم چهارم را به صورت ساده و غیر قابل کلیک کردن، درآورده ایم :

مثال 8

<div class=&quotdropdown-menu&quot>

  <a class=&quotdropdown-item&quot href=&quot#&quot>Link 1</a>

  <a class=&quotdropdown-item&quot href=&quot#&quot>Link 2</a>

  <a class=&quotdropdown-item-text&quot href=&quot#&quot>Text Link</a>

  <span class=&quotdropdown-item-text&quot>Just Text</span>

</div>

آموزش استفاده از Dropdown در یک گروه دکمه Button:

می توانید از یک Dropdown در یک گروه از دکمه های بوت استرپ4، که در درس های قبلی اموزش دادیم، نیز استفاده کنید.

مثال عملی : در کد مثال عملی زیر، دکمه سوم در مجموعه گروه دکمه ها Buttons را به صورت یک dropdown تعریف کرده ایم:

مثال 9

<div class=&quotbtn-group&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Apple</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Samsung</button>

  <div class=&quotbtn-group&quot>

    <button type=&quotbutton&quot class=&quotbtn btn-primary dropdown-toggle&quot data-toggle=&quotdropdown&quot>

       Sony

    </button>

    <div class=&quotdropdown-menu&quot>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Tablet</a>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Smartphone</a>

    </div>

  </div>

</div>

آموزش طراحی سایت استفاده از Dropdown در یک گروه دکمه به صورت عمودی :

مجموعه دکمه های موجود در گروه دکمه مثال قبل را به صورت عمودی یا vertical هم می توان نشان داده و از یک یا چند Dropdown، به عنوان دکمه درونش استفاده کرد.

مثال عملی: کد مثال قبل را در این بخش بازنویسی کرده و جهت عمودی نشان داده شدن گروه دکمه ها، به جای کلاس btn-group. از کلاس btn-group-vertical.، استفاده کرده ایم :

مثال 10

<div class=&quotbtn-group-vertical&quot>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Apple</button>

  <button type=&quotbutton&quot class=&quotbtn btn-primary&quot>Samsung</button>

  <div class=&quotbtn-group&quot>

    <button type=&quotbutton&quot class=&quotbtn btn-primary dropdown-toggle&quot data-toggle=&quotdropdown&quot>

       Sony

    </button>

    <div class=&quotdropdown-menu&quot>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Tablet</a>

      <a class=&quotdropdown-item&quot href=&quot#&quot>Smartphone</a>

    </div>

  </div>

</div>