Bootstrap 5 ကွန်ပျိုး

ပြောင်းလဲပုံကို ပြခြင်း

အချက်အလက်များစွာ ပြသလား သို့မဟုတ် ကွဲပြလား ကို အသုံးပြုလို့ ပြောင်းလဲပုံအကိုယ်ဝင်အဆင့် အပေါ် အသုံးပြုလား

实例

<button data-bs-toggle="collapse" data-bs-target="#demo">နွားခင်း</button>
<div id="demo" class="collapse">
  
胜日寻芳泗水滨，无边光景一时新。

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

</div>

ကိုယ်တိုင် စမ်းသပ်ဖို့

အချက်အလက်

.collapse class အကိုယ်ဝင်အဆင့် သုံးပြီး ပြောင်းလဲပုံအဆင့် ကို ကိုယ်စားပြုပြီး (ကျမ်းစာအုပ် တွင် 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>
    

      

        
山行

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

        <p>တင်တင်းရှိ ပန်းပန်းတင်း အောက်ပိုင်းအချိန် ပန်းပန်းတင်း ပန်းပန်းတင်း အောက်ပိုင်းအချိန်</p>
      </div>
    </div>
  </div>
</div>

ကိုယ်တိုင် စမ်းသပ်ဖို့