Bootstrap 5 ການຈັດສັບການຫຼຸດລົງ

ການສະແດງຄວາມພື້ນຖານ

ຖ້າທ່ານຕ້ອງການປິດຫຼືສະແດງຄວາມຫຼາຍ, ການໃຊ້ສິ່ງຂະຫຍາຍຈະມີປະສິດທິພາບ:

实例

<button data-bs-toggle="collapse" data-bs-target="#demo">ການສະແດງ</button>
<div id="demo" class="collapse">
  
胜日寻芳泗水滨，无边光景一时新。

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

</div>

ທຳການທົດລອງເອງ

ຄວາມອະທິບາຍ

.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>

ທຳການທົດລອງເອງ

ໂດຍປົກກະຕິການສະແດງຄວາມສະກັດກັນຈະຖືກປິດ. ແຕ່ພວກເຮົາສາມາດເພີ່ມ: .show ປະເພດວິທິພັນໃນການສະແດງຄວາມ:

实例

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

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

</div>

ທຳການທົດລອງເອງ

Accordion (ອິນ້ວນ)

ບົດຕົວແລະການຂະຫຍາຍ card ວ່າຈະສະແດງການສະແດງສິ່ງມີຄວາມພິດສະຫລະຂອງອິນ້ວນ.

ລາຍງານ:ການນຳໃຊ້ data-bs-parent 属性确保当显示可折叠项目之一时，会关闭指定父项下的所有可折叠元素。

实例


  

    

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

      

        
春日

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

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

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

    

      
    </div>
    

      

        
初夏绝句

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

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

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

    

      
    </div>
    

      

        
山行

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

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

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

ທຳການທົດລອງເອງ