Collapse در Bootstrap ورژن 4

Collapse ساده

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

Collapse ساده
 <button data-toggle="collapse" data-target="#demo">Collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div> 
مشاهده مثال

مثال توضیح داده شده

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

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

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

Collapse پیش فرض
 <a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div> 
مشاهده مثال

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

Accordion

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

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

Collapse مخفی
 <div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div> 
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز