Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت هجدهم bootstrap : نحوه ی استفاده از لیست بازشونده در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

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

228

Calendar-amico (2)

تاریخ انتشار:

21 , بهمن , 1398

Work time-rafiki

زمان تقریبی مطالعه :

5 دقیقه

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

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

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

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

شرح کار کرد کد بالا :

کافی است قسمتی که قصد دارید نمایش داده شود یا پنهان شود که قالبا در تگ div قرار میگیرد از ویژگی کلاس .collapse استفاده کنید.

برای کنترل کردن اینکه محتوا نمایش داده شود یا پنهان باشد ویژگی data-toggle=”collapse” را به تگ a یا دکمه ( button ) باید اضافه کنید . سپس کافی است ویژگی data-target=”#id” را به تگ دکمه یا لینک اضافه کنیم .

این نکته را فراموش نکنید که تگ div باید دارای ویژگی id باشد و مقدار id باید برابر با نام دلخواه شما باشد که در این مثال نام دلخواه id انتخاب شده است.

نکته : در تگ a شما بجای ویژگی data-target=”#id” میتوانید از ویژگی href=”#id” استفاده کنید به مثال زیر توجه کنید :

در حالت پیش فرض محتوای شما پنهان است برای اینکه به حالت نمایش در بیاید کافی است که تگ div را دارای کلاس .show کنیم تا محتوا در حالت نمایش باشد:

آکاردئون

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

پیشنهاد میشود نمونه اکاردئون زیر را اجرا کنید:

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

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

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

مرتضی افضلی

مرتضی افضلی

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

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

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

  1. سلام
    این قسمت ۱۸ چرا تکرار قسمت ۱۷ هستش خواهشا ویدیوی مربوط به قسمت ۱۸ رو بذارید
    در ضمن آموزشاتون واقعا کاربردیه اگه میشه در مورد بوت استرپ ۴ بیشتر ویدیو تو سایت بذارید
    ممنون

ارسال یک پیام

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