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

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

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

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

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

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

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

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

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

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

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

آکاردئون

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

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

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

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

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