Bootstrap Dropdowns
အခြေခံ Dropdown
dropdown menu သည် အသုံးပြုသူအား ကြိုတင်သတ်မှတ်ထားသောစာရင်းမှ တန်ဖိုးတစ်ခုကို ရွေးချယ်နိုင်စေမည့် ခလုတ်ဖွင့်နိုင်သော မီနူးတစ်ခုဖြစ်သည်-
ဥပမာ
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
နမူနာရှင်းပြထားပါတယ်။
.dropdownအတန်းသည် dropdown menu ကိုညွှန်ပြသည် ။
dropdown menu ကိုဖွင့်ရန်၊ class တစ်ခု .dropdown-toggleနှင့်
data-toggle="dropdown"attribute ပါရှိသော ခလုတ်တစ်ခု သို့မဟုတ် လင့်ခ်တစ်ခုကို အသုံးပြုပါ။
.caretအတန်းသည် caret မြှားသင်္ကေတကို ဖန်တီးသည် () ခလုတ်သည် dropdown တစ်ခုဖြစ်ကြောင်းညွှန်ပြသည်။
dropdown menu ကိုအမှန်တကယ်တည်ဆောက်ရန်အတွက် .dropdown-menuclass ကို element တစ်ခုသို့ ထည့်ပါ ။<ul>
Dropdown Divider
အတန်း ကို .dividerပါးလွှာသော အလျားလိုက်ဘောင်ဖြင့် dropdown menu အတွင်းရှိ လင့်ခ်များကို ခွဲခြားရန် အသုံးပြုသည်-
ဥပမာ
<li class="divider"></li>
ဆွဲချ ခေါင်းစီး
.dropdown-headerdropdown menu အတွင်းရှိ ခေါင်းစီးများကို ထည့်ရန် အတန်းကို အသုံးပြုသည် -
ဥပမာ
<li class="dropdown-header">Dropdown header 1</li>
Disable နှင့် Active items များ
.active အတန်းအစား (အပြာရောင် နောက်ခံအရောင်ကို ထည့်သည်) နှင့် သီးခြား dropdown item တစ်ခုကို မီးမောင်းထိုးပြပါ။
dropdown menu ရှိ အရာတစ်ခုအား ပိတ်ရန်၊ .disabledအတန်းကို အသုံးပြုပါ (မီးခိုးရောင် စာသားအရောင်နှင့် အပေါ်သို့ အပေါ်သို့ တင်ထားသော "ကားပါကင်မရှိ-ဆိုင်းဘုတ်" သင်္ကေတကို ရရှိသည်-
ဥပမာ
<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>
Dropdown ရာထူး
dropdown ကို ညာဘက်ချိန်ညှိရန် .dropdown-menu-right.dropdown-menu ဖြင့် အတန်းထဲသို့ အတန်းကို ပေါင်းထည့်ပါ။
ဥပမာ
<ul class="dropdown-menu dropdown-menu-right">
Dropup
အောက်ဘက်အစား dropdown menu ကို အပေါ်ဘက်သို့ ချဲ့လိုပါက၊ class="dropdown" ဖြင့် <div> ဒြပ်စင်ကို "dropup"အောက်ပါ အဖြစ်သို့ ပြောင်းပါ။
ဥပမာ
<div class="dropup">
Dropdown သုံးစွဲနိုင်မှု
စခရင်ဖတ်စက်များကို အသုံးပြုနေသူများ အသုံးပြုခွင့်ရရှိရေး ပိုမိုကောင်းမွန်လာစေရန်၊ dropdown menu ကိုဖန်တီးသောအခါ တွင် အောက်ပါ roleနှင့် attribute များကို ထည့်သွင်းသင့်သည်-aria-*
ဥပမာ
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a role="menuitem" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#">About Us</a></li>
</ul>
</div>
Bootstrap Dropdown Reference ကို အပြီးသတ်ပါ။
dropdown ရွေးချယ်မှုများ၊ နည်းလမ်းများနှင့် ဖြစ်ရပ်များအားလုံးကို ကိုးကားရန်အတွက်၊ ကျွန်ုပ်တို့၏ Bootstrap JS Dropdown Reference သို့ သွားပါ ။