قسمت هفدهم bootstrap : نحوه ی استفاده از لیست کشویی در بوت استرپ ۴

خانه » مقالات اموزشی » css » بوت استرپ » قسمت هفدهم bootstrap : نحوه ی استفاده از لیست کشویی در بوت استرپ ۴
قسمت هفدهم bootstrap : نحوه ی استفاده از لیست کشویی در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

244

Calendar-amico (2)

تاریخ به‌روزرسانی:

۱۳۹۹-۰۳-۰۸

Work time-rafiki

زمان مطالعه:

5 دقیقه

لیست کشویی از جمله لیست ها و دسته هایی است که کاربرد های زیادی دارد ، اغلب ما این دسته از لیست ها را در منو ها دیده ایم ، این نوع لیست ها در انتخاب شهر و انتخاب کشور ….. نیز در طراحی صفحات سایت کاربرد دارند.

پیشنهاد میشود برای درک بهتر این قسمت از اموزش بوت استرپ سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید ، اگر هم مطالعه نکردید نگران نباشید سعی میکنیم در این اموزش تا حدامکان به بحث های گذشته اشاره داشته باشیم.

لیست کشویی ساده

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

برای ساخت کافی است کلاس .dropdown را به تگ مورد نظر اضافه کنید ، برای ایجاد حالت بازشونده ی دکمه از تگ a که برای لینک است یا تگ button استفاده کنید و کلاس .dropdown-toggle و ویژگی data-toggle=”dropdown” را به ان دهید.

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

جدا کننده در لیست کشویی

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

برای ساخت یک جدا کننده کافی است کلاس .dropdown-divider را به تگ div اضافه کنید .

سربرگ در لیست کشویی

برای نظم بیشتر شما میتوانید از سربرگ ها نیز استفاده کنید ، سربرگ ها به شما کمک میکنند تا بتوانید لیست کشویی مرتب تری داشته باشید بدین منظور کافی است تا کلاس .dropdown-header را به تگ div اضافه کنید به مثال زیر توجه کنید :

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

برای استفاده از حالتی که فعال باشد میتوانید از کلاس .active و برای حالت غیرفعال کلاس .disabled را میتوانید استفاده کنید به مثال زیر توجه فرمایید :

موقعیت لیست کشویی

یکی از ویژگی هایی که میتوانید به لیست کشویی اضافه کنید جهت باز شدن ان است . به قطعه کد زیر توجه کنید ، قطعه کد زیر منو را در جهت راست باز میکند:

قطعه کد زیر منو را در جهت چپ باز میکند :

راست چین باز شدن منو

برای اینکه منوی شما در جهت راست چین قرار بگیرد کافی است کلاس .dropdown-menu-right را به تگ مورد نظر اضافه کنید ، به قطعه کد زیر توجه کنید :

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

برای باز شدن منو در جهت بالا کافی است بجای کلاس .dropdown کافی است کلاس .dropup را جایگزین کنید:

قرار دادن متن در لیست

همیشه قرار نیست چینش منوی شما به حالتی باشد که کاربر گزینه ای را برگزیند شاید نیاز داشته باشید متنی در ان قرار دهید برای استفاده از این حالت کافی است کلاس .dropdown-item-text را قرار دهید ، به قطعه کد زیر توجه کنید :

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

برای اینکار کافی است قطعه کد زیر را اجرا کنید :

شکاف در دکمه ها

گروه دکمه های عمودی همراه با لیست بازشونده

ویدیوی قسمت هفدهم

پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.

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

موفق باشید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 264 نفر در کدپز ثبت نام کرده اند.

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