نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه هفدهم (Dropdown)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه هفدهم (Dropdown)

آموزش Bootstrap 4 جلسه هفدهم (Dropdown) از سری آموزش های تک قسمتی است.

 

ساخت زیر منو ساده

در آموزش های قبلی اشاره ای به ساخت زیر منو ها و منو های ساده کردیم در این جلسه اختصاصی میپردازیم به این موضوع در مرحله اول یک منو ساده زیر منو دار میسازیم برای این کار نیاز به تگ button داریم اما قبل از آن نیاز به یک div داریم که کلاس dropdown به آن بدهیم حال همانطور که در آموزش ساخت دکمه گفتیم دکمه ی خود را ایجاد میکنیم آن دکمه که قرار است زیر منو داشته باشد را برایش یک div میسازیم و کلاس dropdown-menu را به آن میدهیم سپس داخل این div تگ های a با کلاس dropdown-item قرار میدهیم به همین راحتی دکمه ای با قابلیت زیر منو ایجاد کردیم برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

زیر منو با قابلیت divider

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

 

زیر منو های header دار

اگر میخواهید به زیر منو های خود قابلیت دارا بودن header را اضافه کنید ابتدا باید کلاس آن را در تگ div قرار دهید کلاس مربوط به این کار dropdown-header است . هرجا که نیاز به هدر دارید کافیست این مورد را اضافه کنید تا هدر برای شما ایجاد شود برای واضح شدن موضوع کافیست از کد زیر استفاده کنید:

 

فعال و غیرفعال کردن زیر منو

شما میتواند موارد زیر منو رو فعال یا غیر فعال کنید اگر قصد فعال کردن زیر منو ای را دارید کافیست به آن کلاس active را بدهید و اگر قصد غیر فعال کردن زیر منو ای را دارید میتوانید به آن کلاس disabled را بدهید توجه کنید کلاس ها را باید به تگ های a بدهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

موقعیت باز شدن زیر منو

شما میتوانید تعیین کنید که زیر منو هایتان را در جهت چپ باز کنید یا در جهت راست بوت استرپ برای این مورد ۲ کلاس آماده کرده است که میتوانید از آن استفاده کنید برای این مورد اگر میخواهید زیر منو در جهت راست باز شود کلاس dropright و اگر میخواهید زیر منو در جهت چپ باز شود باید کلاس dropleft را استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

باز شدن زیر منو در جهت بالا

نکته ای که وجود دارد در بوت استرپ منو ها هوشمند هستند و اگر فضای کافی نداشته باشند مناسب ترین جهت را خودشان انتخاب کرده و در آن جهت باز میشوند اگر میخواهید زیر منو شما در جهت بالا باز شود از کلاس dropup به جای کلاس dropdown استفاده کنید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

نوشتن متن در زیر منو

تا به اینجا در زیر منو از تگ های a استفاده کردیم و یا از دکمه ها شاید شما بخواهید توضیحاتی در زیر منو خود بنویسید در این صورت میتوانید از کلاس آماده بوت استرپ آن استفاده کنید کلاسی که بوت استرپ برای این مورد آماده کرده  dropdown-item-text است برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

دکمه های گروهی با زیر منو

شما میتوانید برای دکمه های گروهی خود زیر منو بسازید برای این کار کافیست آن دکمه ای که میخواهد زیر منو داشته باشد را مجددا داخل یک div با کلاس btn-group قرار دهید و سپس طبق آموزش ساخت زیر منو برای دکمه ها اقدام کنید این آموزش را در جلسه مربوط به button کاملا توضیح داده ایم برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

کلاس های رنگی و split

زیر منو ها هم مانند باقی موارد از کلاس های رنگی پشتیبانی میکنند اما قبل از آن درباره split صحبت میکنیم که قبلا هم درباره آن توضیح داده ایم در اصل split این امکان را میدهد که شما به کمک کلاس dropdown-toggle-split بتوانید منو و زیر منو را تفکیک کرده و به هردو امکان باز کردن صفحه را بدهید اما درباره کلاس های رنگی شما میتوانید از کلاس btn به اضافه کلاس های رنگی استفاده کنید به عنوان مثال btn-success ما کلاس های رنگی را برای شما لیست میکنیم و هر کدام را توضیح میدهیم:

  • btn-primary : به کمک این کلاس رنگ آبی ساخته میشود.
  • btn-secondary : این کلاس رنگ خاکستری میسازد.
  • btn-success : رنگ سبز توسط این کلاس ساخته میشود.
  • btn-info : آبی کمرنگ رنگی است که این کلاس ایجاد میکند.
  • btn-warning : رنگ نارنجی را میتوانید از این کلاس بگیرید.
  • btn-danger : این کلاس رنگ قرمز میسازد.

برای واضح شدن موضوع از کد زیر کمک بگیرید:

 

ساخت دکمه عمودی زیر منو دار

شما میتوانید دکمه های خود را به صورت عمودی بسازید و به آن قابلیت زیر منو بدهید برای این کار کافیست کلاس btn-group-vertical را به جای btn-group استفاده کنید و هر دکمه ای که قرار است زیر منو داشته باشد مجددا داخل div با کلاس btn-group قرار بگیرد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

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

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه شانزدهم (Card)

آموزش Bootstrap 4 جلسه هجدهم (Navs)

 

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

 

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

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (3 رای, میانگین: 4٫67 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه هفدهم (Dropdown): نوع فایل:mp4 حجم فایل:40.79 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

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

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.