Bootstrap 5 折叠

الطي الأساسي

عندما تريد إخفاء وإظهار كميات كبيرة من المحتوى، المكون القابل للطي مفيد جدًا:

实例

<button data-bs-toggle="collapse" data-bs-target="#demo">ربيع</button>
<div id="demo" class="collapse">
  
胜日寻芳泗水滨，无边光景一时新。

  
等闲识得东风面，万紫千红总是春。

</div>

Tamafi kai kai

توضيح المثال

.collapse لإشارة إلى العنصر القابل للطي (في مثالنا هو <div>)؛ من خلال النقر على الزر، يمكنك عرض أو إخفاء المحتوى.

للتحكم (إظهار/إخفاء) المحتوى القابل للطي، قم بإضافة data-bs-toggle="collapse" إلى عنصر <a> أو <button> ثم أضف إضافة سمة data-bs-target="#id" لربط الزر بالمحتوى القابلة للطي (<div id="demo">).

تعليق:للمكونات <a>، يمكنك استخدام href يستبدل data-bs-target سمات:

实例

<a href="#demo" data-bs-toggle="collapse">ربيع</a>
<div id="demo" class="collapse">
  
胜日寻芳泗水滨，无边光景一时新。

  
等闲识得东风面，万紫千红总是春。

</div>

Tamafi kai kai

بالتأكيد، يمكن إضافة .show للإعداد افتراضيًا لعرض المحتوى:

实例

<div id="demo" class="collapse show">
  
胜日寻芳泗水滨，无边光景一时新。

  
等闲识得东风面，万紫千红总是春。

</div>

Tamafi kai kai

Accordion (مفتاح موسيقي)

مثال: من خلال توسيع عنصر card، يتم عرض مفتاح موسيقي بسيط.

تعليق:الاستخدام data-bs-parent 属性确保当显示可折叠项目之一时，会关闭指定父项下的所有可折叠元素。

实例


  

    

      
        可折叠组项目 #1
      
    </div>
    

      

        
春日

        
胜日寻芳泗水滨，无边光景一时新。

        
等闲识得东风面，万紫千红总是春。

      </div>
    </div>
  </div>
  

    

      
    </div>
    

      

        
初夏绝句

        
纷纷红紫已成尘，布谷声中夏令新。

        
夹路桑麻行不尽，始知身是太平人。

      </div>
    </div>
  </div>
  

    

      
    </div>
    

      

        
山行

        
远上寒山石径斜，白云生处有人家。

        
停车坐爱枫林晚，霜叶红于二月花。

      </div>
    </div>
  </div>
</div>

Tamafi kai kai