آموزش بوت استرپ

collapse بوت استرپ bootstrap

Collapsibles پایه

Collapsibles زمانی مفید هستند که می خواهید  حجم زیادی از متن را مخفی و نمایش دهید:

مثال:

 

توضیح مثال:

کلاس collapse یک عنصر collapsible (یک <div> در مثال ما) را نشان می دهد. این محتوا است که با کلیک یک دکمه نمایش داده می شود یا پنهان می شود.

برای کنترل (نشان دادن / پنهان کردن) محتوای قابل انعطاف، ویژگی data-toggle = “collapse” را به یک عنصر <a> یا یک <button> اضافه کنید. سپس attribute data-target = “# id” را برای اتصال دکمه با محتوای قابل انعطاف (<div id = “demo”>) اضافه کنید.

توجه: برای <a> عناصر، می توانید از ویژگی href به جای مشخصه data-target استفاده کنید:

مثال

به طور پیش فرض، محتوای قابل پنهان پنهان است. با این حال، می توانید کلاس In را اضافه کنید تا به طور پیش فرض محتوای نمایش داده شود:

 

Collapsible Panel

پنل پیچیده
پانل قابل انعطاف
مثال زیر پانل قابل انعطاف را نشان می دهد

 

گروه فهرست انعطاف پذیر

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

 

Accordion

مثال زیر نشان می دهد یک آکوردئون ساده با گسترش بخش پانل.

 

توجه: از ویژگی data-parent استفاده کنید تا اطمینان حاصل کنید که تمام عناصر قابل انعطاف تحت والد مشخص شده هنگامی که یکی از آیتم های قابل انعطاف نشان داده شده بسته شود بسته شود

نوشته های مشابه

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

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

همچنین ببینید

بستن
بستن