Source

ဆွဲချမှုများ

Bootstrap dropdown plugin ဖြင့် လင့်ခ်များစာရင်းများနှင့် အခြားအရာများကိုပြသရန်အတွက် ဆက်စပ်သောထပ်ဆင့်မှုများကို အဖွင့်အပိတ်လုပ်ပါ။

ခြုံငုံသုံးသပ်ချက်

လင့်ခ်များစာရင်းများနှင့် အခြားအရာများကိုပြသရန်အတွက် ဆက်စပ်အလွှာများ နှင့် အခြားအရာများကို ပြောင်းလဲနိုင်သည်။ ၎င်းတို့သည် ပါဝင်သော Bootstrap dropdown JavaScript plugin ဖြင့် အပြန်အလှန်တုံ့ပြန်မှု ပြုလုပ်ထားသည်။ ပျံဝဲခြင်းမဟုတ်ဘဲ ကလစ်ဖြင့် ခလုတ်နှိပ်ခြင်း၊ ဒါက ရည်ရွယ်ချက်ရှိရှိ ဒီဇိုင်းဆုံးဖြတ်ချက်တစ်ခု ပါ။

Dropdowns များကို ရွေ့လျားနေရာချထားခြင်းနှင့် မြင်ကွင်းပို့သိရှိခြင်းတို့ကို ပံ့ပိုးပေးသည့် ပြင်ပအဖွဲ့အစည်းစာကြည့်တိုက်၊ Popper.js ပေါ်တွင် တည်ဆောက်ထားသည် ။ Bootstrap ၏ JavaScript မတိုင်မီ popper.min.js ပါ ၀င်ပါ သို့မဟုတ် Popper.js ပါရှိသော bootstrap.bundle.min.js/ bootstrap.bundle.jsကိုအသုံးပြုပါ။ Popper.js ကို navbars တွင် dropdowns နေရာချရန် အသုံးမပြုသော်လည်း dynamic positioning ကိုမလိုအပ်ပါ။

အကယ်၍ သင်သည် ကျွန်ုပ်တို့၏ JavaScript ကို အရင်းအမြစ်မှ တည်ဆောက်နေပါက၊ ၎င်းသည် လိုအပ်ပါသည်util.js ။

သုံးစွဲနိုင်မှု

WAI ARIA စံနှုန်းသည် တကယ့်ဝစ်ဂျက်တစ်ခုကို သတ်မှတ် role="menu"ပေးသည် ၊ သို့သော် ၎င်းသည် လုပ်ဆောင်ချက်များ သို့မဟုတ် လုပ်ဆောင်ချက်များကို အစပျိုးပေးသည့် အပလီကေးရှင်းကဲ့သို့သော မီနူးများအတွက် သီးသန့်ဖြစ်သည်။ ARIA မီနူးများတွင် မီနူးအရာများ၊ အမှတ်ခြစ်ထားသော မီနူးအရာများ၊ ရေဒီယိုခလုတ်မီနူးအရာများ၊ ရေဒီယိုခလုတ်အုပ်စုများနှင့် မီနူးခွဲများသာ ပါဝင်နိုင်သည်။

တစ်ဖက်တွင်မူ Bootstrap ၏ dropdowns များသည် ယေဘူယျဖြစ်ပြီး အခြေအနေအမျိုးမျိုးနှင့် markup တည်ဆောက်ပုံများတွင် အသုံးပြုနိုင်စေရန် ဒီဇိုင်းထုတ်ထားသည်။ ဥပမာအားဖြင့်၊ ရှာဖွေမှုအကွက်များ သို့မဟုတ် လော့ဂ်အင်ဖောင်များကဲ့သို့သော ထပ်လောင်းထည့်သွင်းမှုများနှင့် ဖောင်ထိန်းချုပ်မှုများပါရှိသော dropdowns များကို ဖန်တီးနိုင်သည်။ ဤအကြောင်းကြောင့်၊ Bootstrap သည် စစ်မှန်သော ARIA မီနူး များအတွက် လိုအပ်သော အရည်အချင်းများ roleနှင့် မည်သည်ကိုမျှ (အလိုအလျောက်ထည့်မည်မဟုတ်) မျှော်လင့်မထားပေ ။ စာရေးဆရာများသည် ဤပိုမိုတိကျသော အရည်အချင်းများကို ကိုယ်တိုင်ထည့်သွင်းရပါမည်။aria-

.dropdown-itemသို့သော်၊ Bootstrap သည် cursor ခလုတ်များကို အသုံးပြု၍ ခလုတ်များကို အသုံးပြု၍ အစိတ်အပိုင်းတစ်ခုချင်းစီကို ရွေ့လျားနိုင်ပြီး မီနူးကို သော့ဖြင့်ပိတ် နိုင်မှုကဲ့သို့သော စံကီးဘုတ်မီနူး အပြန်အလှန်တုံ့ပြန်မှုအများစုအတွက် built-in ပံ့ပိုးပေးပါသည် ESC။

ဥပမာများ

dropdown ၏ toggle (သင့်ခလုတ် သို့မဟုတ် လင့်ခ်) နှင့် dropdown menu အတွင်း .dropdownသို့မဟုတ် ကြေငြာသော အခြားအရာတစ်ခုကို ခြုံ position: relative;ပါ။ <a>သင်၏ ဖြစ်နိုင်ချေ ရှိသော <button>လိုအပ်ချက်များနှင့် ပိုမိုကိုက်ညီစေရန် အစိတ်အပိုင်းများ မှ ဆွဲချမှုများကို အစပျိုးနိုင်သည် ။

တစ်ချက်နှိပ်လိုက်ပါ။

မည်သည့်တစ်ခုတည်းကိုမဆို .btnmarkup အပြောင်းအလဲများဖြင့် dropdown toggle အဖြစ်ပြောင်းနိုင်သည်။ <button>ဤသည်မှာ ၎င်းတို့အား အစိတ်အပိုင်းနှစ်ခု လုံးဖြင့် အလုပ်လုပ်ရန် သင်ထားနိုင်ပုံဖြစ်သည် -

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

နှင့် <a>ဒြပ်စင်များနှင့်အတူ:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

အကောင်းဆုံးသော အစိတ်အပိုင်းမှာ မည်သည့် ခလုတ်မျိုးကွဲနှင့်မဆို ပြုလုပ်နိုင်သည်-

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

ခွဲပေးလိုက်ပါ။

အလားတူပင်၊ ခလုတ်တစ်ချက်မှ လျှော့စျေးများကဲ့သို့ အမှတ်အသားပြုထားသည့် ခွဲခြမ်းခလုတ်များကို ဖန်တီးပါ၊ သို့သော် .dropdown-toggle-splitdropdown caret တစ်ဝိုက်တွင် သင့်လျော်သောအကွာအဝေးအတွက် ပေါင်းထည့်ခြင်းဖြင့်။

paddingကတ်၏တစ်ဖက်တစ်ချက်ရှိ အလျားလိုက်ကို 25% လျှော့ချရန်နှင့် margin-leftပုံမှန်ခလုတ် dropdowns အတွက် ထည့်သွင်းထားသည့် အရာများကို ဖယ်ရှားရန် ဤအပိုအတန်းအစားကို ကျွန်ုပ်တို့အသုံးပြုပါသည်။ ဤအပိုပြောင်းလဲမှုများသည် ကတ်ကိုခွဲခလုတ်တွင် ဗဟိုပြုထားကာ ပင်မခလုတ်ဘေးရှိ ပိုမိုသင့်လျော်သော အရွယ်အစားထိမှန်ဧရိယာကို ပေးဆောင်သည်။

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>

အရွယ်အစား

ခလုတ် dropdowns များသည် ပုံသေနှင့် ခွဲထားသော dropdown ခလုတ်များအပါအဝင် အရွယ်အစားအားလုံး၏ ခလုတ်များနှင့် အလုပ်လုပ်ပါသည်။

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

လမ်းညွှန်ချက်များ

Dropup

.dropupပင်မဒြပ်စင်သို့ ပေါင်းထည့်ခြင်းဖြင့် ဒြပ်စင်များအထက်ရှိ dropdown menus များကို အစပျိုးပါ ။

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ဖြောင့်ဖြောင့်

.droprightပင်မဒြပ်စင်သို့ ထည့်ခြင်းဖြင့် ဒြပ်စင်များ၏ညာဘက်ရှိ dropdown menus များကို အစပျိုးပါ ။

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ရေစက်

.dropleftပင်မဒြပ်စင်သို့ ပေါင်းထည့်ခြင်းဖြင့် ဒြပ်စင်များ၏ဘယ်ဘက်ရှိ dropdown menus များကို အစပျိုးပါ ။

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

သမိုင်းကြောင်းအရ dropdown menu အကြောင်းအရာများ သည် လင့်ခ်များဖြစ်ရမည်၊ သို့သော် ၎င်းသည် v4 နှင့်မဖြစ်တော့ပါ။ ယခု သင်သည် s <button>အစား သင်၏ dropdowns တွင် အစိတ်အပိုင်းများကို ရွေးချယ်နိုင်ပါပြီ ။<a>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

အပြန်အလှန်အကျိုးသက်ရောက်မှုမရှိသော dropdown item များကိုလည်း ဖန်တီးနိုင်သည် .dropdown-item-text။ စိတ်ကြိုက် CSS သို့မဟုတ် စာသား utilities များဖြင့် ထပ်မံစတိုင်လ်ကျရန် လွပ်လပ်စွာခံစားပါ။

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
</div>

အသက်ဝင်သည်။

၎င်းတို့ကို အသက်ဝင်သည့်ပုံစံအဖြစ် ပုံစံသတ်မှတ်ရန်.active dropdown ရှိ အရာများ ထဲသို့ ထည့်ပါ ။

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item active" href="#">Active link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

မသန်စွမ်း

၎င်းတို့ကို disabled အဖြစ် ပုံစံသတ်မှတ်ရန်.disabled dropdown ရှိ အရာများ ထဲသို့ ထည့်ပါ ။

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ပုံမှန်အားဖြင့်၊ dropdown menu ကို ထိပ်ပိုင်းနှင့် ၎င်း၏မိဘ၏ ဘယ်ဘက်ခြမ်းတွင် 100% အလိုအလျောက် နေရာချထားပါသည်။ dropdown menu ကို ညာဘက်သို့ ညှိရန် .dropdown-menu-righta သို့ ထည့်ပါ ။.dropdown-menu

ကြိုတင်အသိပေးသည်! Dropdowns များကို Popper.js ဖြင့် နေရာချထားသည် (၎င်းတို့ကို navbar တစ်ခုတွင် ထည့်ထားသည့်အခါမှလွဲ၍)။

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Right-aligned menu
  </button>
  <div class="dropdown-menu dropdown-menu-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

တုံ့ပြန်မှု ချိန်ညှိမှု

တုံ့ပြန်မှု ချိန်ညှိမှုကို သင်အသုံးပြုလိုပါက၊ ရည်ညွှန်းချက်ပေါင်းထည့်ခြင်းဖြင့် data-display="static"တုံ့ပြန်မှုပုံစံပြောင်းလဲခြင်းအတန်းများကို အသုံးပြုခြင်းဖြင့် ရွေ့လျားနေရာချထားမှုကို ပိတ်ပါ။

ပေးထားသော breakpoint သို့မဟုတ် ပိုကြီးသော dropdown menu ကို ညာဘက်သို့ ညှိရန် ၊ ထည့်ပါ .dropdown-menu{-sm|-md|-lg|-xl}-right။

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-right">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

ပေးထားသော breakpoint သို့မဟုတ် ပိုကြီးသော dropdown menu ကို ဘယ်ဘက် တွင် ညှိရန် ၊ ပေါင်းထည့် .dropdown-menu-rightပါ .dropdown-menu{-sm|-md|-lg|-xl}-left။

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

data-display="static"Popper.js ကို navbars တွင် အသုံးမပြုသောကြောင့်၊ navbars တွင် dropdown ခလုတ်များ အတွက် attribute တစ်ခုထည့်ရန် မလိုအပ်ကြောင်း သတိပြုပါ။

ခေါင်းစီးများ

မည်သည့် dropdown menu တွင်မဆို လုပ်ဆောင်ချက်များ၏ အညွှန်းကဏ္ဍများသို့ ခေါင်းစီးတစ်ခုထည့်ပါ။

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

ပိုင်းခြားခြင်း။

ပိုင်းခြားမှုဖြင့် သက်ဆိုင်ရာ မီနူးအရာများကို အုပ်စုများ ခွဲပါ။

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

စာသား

စာသားပါသော dropdown menu တွင် မည်သည့် freeform စာသားကိုမဆို နေရာချပြီး spacing utilities ကိုသုံး ပါ။ မီနူးအကျယ်ကို ကန့်သတ်ရန် အပိုအရွယ်အစားစတိုင်များ လိုအပ်ကြောင်း သတိပြုပါ။

<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</div>

ပုံစံများ

dropdown menu အတွင်း ဖောင်တစ်ခုကို ထည့်ပါ သို့မဟုတ် dropdown menu တွင် ပြုလုပ်ပါ၊ ၎င်းကို သင်လိုအပ်သော အနုတ်လက္ခဏာနေရာ ပေးရန် အတွက် အနားသတ် သို့မဟုတ် ပက်ဒ် utilities ကို အသုံးပြုပါ။

<div class="dropdown-menu">
  <form class="px-4 py-3">
    <div class="form-group">
      <label for="exampleDropdownFormEmail1">Email address</label>
      <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
    </div>
    <div class="form-group">
      <label for="exampleDropdownFormPassword1">Password</label>
      <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
    </div>
    <div class="form-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">New around here? Sign up</a>
  <a class="dropdown-item" href="#">Forgot password?</a>
</div>

<form class="dropdown-menu p-4">
  <div class="form-group">
    <label for="exampleDropdownFormEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleDropdownFormPassword2">Password</label>
    <input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
  </div>
  <div class="form-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

dropdown ၏တည်နေရာကိုပြောင်းလဲရန် data-offsetသို့မဟုတ် အသုံးပြု ပါ။data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

အသုံးပြုမှု

ဒေတာ attributes သို့မဟုတ် JavaScript မှတဆင့်၊ dropdown plugin သည် .showပင်မစာရင်းအကြောင်းအရာတွင် အတန်းကို ပြောင်းပစ်ခြင်းဖြင့် လျှို့ဝှက်အကြောင်းအရာ (dropdown menus) ကို ပြောင်းပေးသည်။ ရည်ညွှန်းချက်သည် အ data-toggle="dropdown"ပလီကေးရှင်းအဆင့်ရှိ dropdown menus များကိုပိတ်ရန်အတွက် အားကိုးထားသောကြောင့် ၎င်းကို အမြဲသုံးရန် စိတ်ကူးကောင်းပါသည်။

ထိတွေ့အသုံးပြုနိုင်သော စက်များတွင်၊ ဒေါင်းလုပ်တစ်ခုဖွင့်ခြင်းသည် ဒြပ်စင် ၏ချက်ချင်းကလေးများထံသို့ ဗလာ( $.noop) ကိုင်တွယ်သူများကို ပေါင်းထည့်သည်။ ဤအရုပ်ဆိုးအကျည်းတန်သောဟက်ခ်သည် iOS ၏ဖြစ်ရပ်ကိုယ်စားလှယ်အဖွဲ့တွင် စူးစမ်းလေ့လာရန် လိုအပ်သည် ၊ ၎င်းသည် dropdown ၏အပြင်ဘက်ရှိ မည်သည့်နေရာတွင်မဆို နှိပ်ခြင်းဖြင့် dropdown ကိုပိတ်သောကုဒ်ကိုစတင်ခြင်းမှတားဆီးနိုင်မည်ဖြစ်သည်။ dropdown ကို ပိတ်ပြီးသည်နှင့်၊ ဤအပိုအလွတ် ကိုင်တွယ်သူများကို ဖယ်ရှားပါမည်။mouseover<body>mouseover

ဒေတာဂုဏ်တော်များမှတဆင့်

data-toggle="dropdown"dropdown တစ်ခုကိုပြောင်းရန် လင့်ခ် သို့မဟုတ် ခလုတ်တစ်ခုသို့ ထည့်ပါ ။

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

JavaScript မှတဆင့်

JavaScript မှတဆင့် dropdown များကိုခေါ်ဆိုပါ-

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`လိုအပ်နေပါသေးတယ်။

သင့် dropdown ကို JavaScript မှတဆင့် ခေါ်သည်ဖြစ်စေ သို့မဟုတ် data-api ကိုသုံးသည်ဖြစ်စေ ၊ data-toggle="dropdown"dropdown ၏ trigger element တွင် အမြဲရှိနေရန် လိုအပ်ပါသည်။

ရွေးချယ်စရာများ

ရွေးချယ်မှုများကို data attribute သို့မဟုတ် JavaScript မှတဆင့်ဖြတ်သန်းနိုင်သည်။ data-ဒေတာရည်ညွှန်းချက်များအတွက် ၊ တွင်ပါရှိသည့်အတိုင်း ရွေးချယ်စရာအမည်ကို ပေါင်းထည့် ပါ data-offset=""။

နာမည်	ရိုက်ပါ။	ပုံသေ	ဖော်ပြချက်
နှိမ်သည်။	နံပါတ် \| string \| လုပ်ဆောင်ချက်	၀ယ်တယ်။	၎င်း၏ပစ်မှတ်နှင့် နှိုင်းယှဥ်သော dropdown ၏ offset နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ offset docs ကို ကိုးကားပါ ။
လှန်	ဘူလီယံ	မှန်ပါတယ်။	ရည်ညွှန်းချက်ဒြပ်စင်ပေါ်တွင် ထပ်နေပါက Dropdown ကိုလှန်ခွင့်ပြုပါ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ flip docs ကို ကိုးကားပါ ။
နယ်နိမိတ်	string \| ဒြပ်စင်	'scrollParent'	dropdown menu ၏ ကန့်သတ်ကန့်သတ်ဘောင်။ `'viewport'`, `'window'`, `'scrollParent'`, သို့မဟုတ် HTMLElement အကိုးအကား (JavaScript သာ) ၏ တန်ဖိုးများကို လက်ခံသည် ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ PreventOverflow docs ကို ကိုးကားပါ ။
အကိုးအကား	string \| ဒြပ်စင်	'ပြောင်းရန်'	dropdown menu ၏အကိုးအကားဒြပ်စင်။ `'toggle'`, `'parent'`, သို့မဟုတ် HTMLElement ရည်ညွှန်းချက် ၏ တန်ဖိုးများကို လက်ခံသည် ။ နောက်ထပ်အချက်အလက်များအတွက် Popper.js ၏ ရည်ညွှန်းObject docs ကို ကိုးကားပါ ။
ပြသခြင်း။	ကြိုးတစ်ချောင်း	'သွက်လက်'	ပုံမှန်အားဖြင့်၊ ကျွန်ုပ်တို့သည် ပြောင်းလဲနေသောနေရာချထားမှုအတွက် Popper.js ကိုအသုံးပြုသည်။ ၎င်းကို ပိတ်ပါ `static`။

စတိုင် ကို ကွန်တိန်နာတွင် အသုံးပြုသည် boundaryမှလွဲ၍ အခြားတန်ဖိုးတစ်ခုခုသို့ သတ်မှတ် သည့်အခါ မှတ်သား ပါ။'scrollParent'position: static.dropdown

နည်းလမ်းများ

နည်းလမ်း	ဖော်ပြချက်
`$().dropdown('toggle')`	ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းကြောင်းပြခြင်း၏ dropdown menu ကို ပြောင်းပေးသည်။
`$().dropdown('show')`	ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းညွှန်မှု၏ dropdown menu ကို ပြသည်။
`$().dropdown('hide')`	ပေးထားသော navbar သို့မဟုတ် တက်ဘ်လုပ်ထားသော လမ်းကြောင်းပြခြင်း၏ dropdown menu ကို ဝှက်ထားသည်။
`$().dropdown('update')`	ဒြပ်စင်တစ်ခု၏ dropdown အနေအထားကို အပ်ဒိတ်လုပ်သည်။
`$().dropdown('dispose')`	ဒြပ်စင်တစ်ခု၏ dropdown ကို ဖျက်ဆီးသည်။

အဲ့ဒါနဲ့

dropdown ဖြစ်ရပ်အားလုံးကို .dropdown-menu's ပင်မဒြပ်စင်တွင် အလုပ်ထုတ်ပြီး relatedTarget၎င်းတန်ဖိုးသည် ခလုတ်ဖွင့်ရန်နေရာတစ်ခု၏ အစိတ်အပိုင်းတစ်ခုဖြစ်သည်။ hide.bs.dropdownနှင့် hidden.bs.dropdownအဖြစ်အပျက်များ သည် ကလစ်ဖြစ်ရပ်အတွက် ဖြစ်ရပ်အရာဝတ္တုတစ်ခုပါရှိသည် clickEvent(မူရင်းဖြစ်ရပ်အမျိုးအစားဖြစ်မှသာ) ပိုင်ဆိုင်မှု တစ်ခုရှိသည်။click

ပွဲ	ဖော်ပြချက်
`show.bs.dropdown`	show instance method ကို ခေါ်သောအခါတွင် ဤဖြစ်ရပ်သည် ချက်ချင်း မီးလောင်ပါသည်။
`shown.bs.dropdown`	dropdown ကိုအသုံးပြုသူမြင်နိုင်စေရန်ပြုလုပ်သောအခါ (CSS အပြောင်းအရွှေ့များပြီးမြောက်ရန်စောင့်ဆိုင်းပါမည်)။
`hide.bs.dropdown`	hide instance method ကို ခေါ်သောအခါတွင် ဤဖြစ်ရပ်ကို ချက်ချင်း ဖြုတ်သည်။
`hidden.bs.dropdown`	dropdown ကို အသုံးပြုသူမှ ဝှက်ထားမှုပြီးသွားသောအခါ (CSS အပြောင်းအရွှေ့များ ပြီးဆုံးရန် စောင့်ပါမည်)။

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

ဆွဲချမှုများ

ခြုံငုံသုံးသပ်ချက်

သုံးစွဲနိုင်မှု

ဥပမာများ

တစ်ချက်နှိပ်လိုက်ပါ။

ခွဲပေးလိုက်ပါ။

အရွယ်အစား

လမ်းညွှန်ချက်များ

Dropup

ဖြောင့်ဖြောင့်

ရေစက်

မီနူးပစ္စည်းများ

အသက်ဝင်သည်။

မသန်စွမ်း

မီနူး ချိန်ညှိမှု

တုံ့ပြန်မှု ချိန်ညှိမှု

မီနူး အကြောင်းအရာ

ခေါင်းစီးများ

ပိုင်းခြားခြင်း။

စာသား

ပုံစံများ

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မှတဆင့်

`data-toggle="dropdown"`လိုအပ်နေပါသေးတယ်။

ရွေးချယ်စရာများ

နည်းလမ်းများ

အဲ့ဒါနဲ့

ဆွဲချမှုများ

ခြုံငုံသုံးသပ်ချက်

သုံးစွဲနိုင်မှု

ဥပမာများ

တစ်ချက်နှိပ်လိုက်ပါ။

ခွဲပေးလိုက်ပါ။

အရွယ်အစား

လမ်းညွှန်ချက်များ

Dropup

ဖြောင့်ဖြောင့်

ရေစက်

မီနူးပစ္စည်းများ

အသက်ဝင်သည်။

မသန်စွမ်း

မီနူး ချိန်ညှိမှု

တုံ့ပြန်မှု ချိန်ညှိမှု

မီနူး အကြောင်းအရာ

ခေါင်းစီးများ

အောက်ဖော်ပြပါ ခေါင်းစီး

ပိုင်းခြားခြင်း။

စာသား

ပုံစံများ

ဆွဲချရွေးချယ်စရာများ

အသုံးပြုမှု

ဒေတာဂုဏ်တော်များမှတဆင့်

JavaScript မှတဆင့်

data-toggle="dropdown"လိုအပ်နေပါသေးတယ်။

ရွေးချယ်စရာများ

နည်းလမ်းများ

အဲ့ဒါနဲ့

`data-toggle="dropdown"`လိုအပ်နေပါသေးတယ်။