Bootstrap 4 ကို ခေါက်သိမ်းပါ။
အခြေခံအချက်များ
Collapsibles များသည် အကြောင်းအရာ အများအပြားကို ဖျောက်ပြီး ပြသလိုသောအခါတွင် အသုံးဝင်သည်-
ဥပမာ
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
နမူနာရှင်းပြထားပါတယ်။
အတန်းသည် ပြိုကျနိုင်သော ဒြပ်စင်တစ်ခုကို ညွှန်ပြသည် ( .collapseကျွန်ုပ်တို့၏ ဥပမာတွင် <div>); ဤအရာသည် ခလုတ်တစ်ချက်နှိပ်ရုံဖြင့် ပြသမည် သို့မဟုတ် ဝှက်ထားမည့် အကြောင်းအရာဖြစ်သည်။
ခေါက်နိုင်သော အကြောင်းအရာကို ထိန်းချုပ်ရန် (ပြသ/ဖျောက်) ရန်၊ data-toggle="collapse"ရည်ညွှန်းချက်ကို <a> သို့မဟုတ် <button> ဒြပ်စင်တစ်ခုသို့ ထည့်ပါ။ ထို့နောက် data-target="#id"ခေါက်သိမ်းနိုင်သော အကြောင်းအရာ (<div id="demo">) နှင့် ခလုတ်ကို ချိတ်ဆက်ရန် ရည်ညွှန်းချက်ကို ထည့်ပါ။
မှတ်ချက်- <a> ဒြပ်စင်များအတွက်၊ သင်သည် hrefattribute အစား attribute ကို သုံးနိုင်သည် data-target
-
ဥပမာ
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
မူရင်းအားဖြင့်၊ ခေါက်သိမ်းနိုင်သော အကြောင်းအရာကို ဝှက်ထားသည်။ သို့သော်၊ .showအကြောင်းအရာကို မူရင်းအတိုင်းပြသရန် အတန်းကို သင်ထည့်နိုင်သည်။
ဥပမာ
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
ဘာဂျာ
အောက်ဖော်ပြပါ ဥပမာသည် ကတ်အစိတ်အပိုင်းကို တိုးချဲ့ခြင်းဖြင့် ရိုးရိုးကော်ဒီယံကို ပြသသည်။
မှတ်ချက်-data-parent သတ်မှတ်ထားသော အုပ်ထိန်းမှုအောက်ရှိ ပြိုကျနိုင်သော အစိတ်အပိုင်းများအားလုံးကို ခေါက်သိမ်းနိုင်သော အရာများထဲမှ တစ်ခုကို ပြသသောအခါတွင် ပိတ်ထားမည်ဖြစ်ကြောင်း သေချာစေရန် ရည်ညွှန်းချက်ကို အသုံးပြု ပါ။
ဥပမာ
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
အပြီးသတ် Bootstrap 4 ကိုးကားချက်ကို ခေါက်သိမ်းပါ။
ပြိုကျမှုရွေးချယ်စရာများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap 4 JS ခေါက် သိမ်းခြင်း အကိုးအကားသို့ သွားပါ ။