Bootstrap 5 အော်ချိန်း လျှက်ခ်န်

အခြေခံ အော်ချိန်း လျှက်ခ်န်

အော်ချိန်း လျှက်ခ်န် တစ်မျိုး ဖြစ်ပါသည်။ အသုံးပြုသူ က အဆိုပါ အော်ချိန်း လျှက်ခ်န် မှ ရွေးချယ်နိုင်သော ကိုယ်စားပုံ ကို သုံးနိုင်ပါ

အကျိုးသက်ရောက်မှု

<div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
    လျှက်ခ်န် ဘေ့စ်
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">လိပ်စာ 1</a></li>
    <li><a class="dropdown-item" href="#">လိပ်စာ 2</a></li>
    <li><a class="dropdown-item" href="#">လိပ်စာ 3</a></li>
  </ul>
</div>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အက်ဥ်စ်ကျောက် အချက်အလက်

.dropdown အော်ချိန်း လျှက်ခ်န် ကို ကူညီပေးသော အက်ဥ်စ်ကျောက် ကို သုံးပါ

ဖြင့် အော်ချိန်း လျှက်ခ်န် ကို သုံးပါ .dropdown-toggle 类和 data-toggle="dropdown" 属性的按钮或链接。

将 .dropdown-menu 类添加到 <div> အစိတ်အပိုင်း သို့ အချက်အလက် ထည့်သွင်း ပြီး .dropdown-item အချက်အလက် ပြောင်းလဲ ပြီး အောက်ဆုံး ဖြန့်ဖျား အချက်အလက် တစ်ခု ပြီး အချက်အလက် ပြောင်းလဲလာ သည်

Dropdown divider

.dropdown-divider အချက်အလက် သုံး ပြီး အောက်ဆုံး ဖြန့်ဖျား အချက်အလက် တစ်ခု ပြီး အချက်အလက် ပြောင်းလဲလာ သည်

အကျိုးသက်ရောက်မှု

<li><hr class="dropdown-divider"></hr></li>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

Dropdown header

.dropdown-header အချက်အလက် သုံး ပြီး အောက်ဆုံး ဖြန့်ဖျား အချက်အလက် တစ်ခု ပြီး အချက်အလက် ပြောင်းလဲလာ သည်

အကျိုးသက်ရောက်မှု

<li><h5 class="dropdown-header">Dropdown header 1</h5></li>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အပိုင်းအချက် အပိုင်း အပိုင်း

သင် အပိုင်းအချက် အပိုင်း အပိုင်း အပိုင်း သုံး .active အချက်အလက် ပြောင်းလဲ ပြီး အချက်အလက် တစ်ခု အပိုင်းအချက် အသတ်မတ် ပြီး အချက်အလက် အခြေအနေ ပြောင်းလဲလာ သည် (အနီအရောင် အခြေအနေ ထည့်သွင်းလာ သည်)。

အောက်ဆုံး ဖြန့်ဖျား အချက်အလက် တစ်ခု အပိုင်းအချက် အပိုင်း ပြောင်းလဲရန် အချက်အလက် သုံးပါ .disabled အချက်အလက် ပြောင်းလဲ ပြီး အချက်အလက် အဆင်း အရောင် အမြင့် နှင့် "no-parking-sign" အသွင်ပေါ် ထည့်သွင်းလာ သည် (ဆိုင်းချိန် ဖြစ် ပါသည်)。

အကျိုးသက်ရောက်မှု

<li><a class="dropdown-item" href="#">အမြှား ဖြန့်ဖျား</a></li>
<li><a class="dropdown-item active" href="#">လက်ရှိ အပိုင်းအချက်</a></li>
<li><a class="dropdown-item disabled" href="#">အပိုင်းအချက် မပြောင်းလဲ</a></li>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမြှား ဖြန့်ဖျား အချက်အလက်

သင် နောက်ဆုံး ဖြန့်ဖျား အချက်အလက် သို့ .dropend သို့မဟုတ် .dropstart အချက်အလက် ပြောင်းလဲ ပြီး "dropend" သို့မဟုတ် "dropstart" အမြှား ဖြန့်ဖျား ဖွင့်လာ ပြီး အဆက်အလက် သို့ အသွင်ပေါ် ထည့်သွင်းလာ သည် အပြည့်အဝင် အဖြစ် ရှိသည်:

အမြှား ဖြန့်ဖျား အောက်ဆုံး

<div class="dropdown dropend">

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမြှား ဖြန့်ဖျား အောက်ဆုံး

<div class="dropdown dropstart">

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမြှား ဖြန့်ဖျား အောက်ဆုံး ချဲ့

အောက်ဆုံး ဖြန့်ဖျား တစ်လျှောက် ချဲ့ရန် လိုခြင်း ရှိ ကြောင်း .dropdown-menu-end အချက်အလက် ပြောင်းလဲ ပြီး .dropdown-menu အစိတ်အပိုင်းများ:

အကျိုးသက်ရောက်မှု

<div class="dropdown-menu dropdown-menu-end">

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အမြှား ဖြန့်ဖျား

သင် နောက်ဆုံး နောက်မှ ဖြန့်ဖျားရန် လိုခြင်း မရှိ သော်လည်း အောက်ဆုံး ဖြန့်ဖျားရန် လိုခြင်း ရှိ ကြောင်း သင့် class="dropdown" အချက်အလက် သို့ <div> အစိတ်အပိုင်း ပြောင်းလဲကြောင်း "dropup"：

အကျိုးသက်ရောက်မှု

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

下拉文本

.dropdown-item-text 类用于为下拉项添加纯文本，或用于为链接添加默认链接样式。

အကျိုးသက်ရောက်မှု

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">လိပ်စာ 1</a></li>
  <li><a class="dropdown-item" href="#">လိပ်စာ 2</a></li>
  <li><a class="dropdown-item" href="#">လိပ်စာ 3</a></li>
  <li><a class="dropdown-item-text" href="#">လိပ်စာ ခေါ်ချက်</a></li>
  <li><span class="dropdown-item-text">အချက်အလက်</span></li>
</ul>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

ပေါင်းစပ်ကုဒ် နှင့် ခွဲခြားထားသော သတင်းအချက်

အကျိုးသက်ရောက်မှု

<div class="btn-group">
  <button type="button" class="btn btn-primary">ဟော်ဗီ</button>
  <button type="button" class="btn btn-primary">ဒီဂျင်</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ရှိုင်း</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">လက်တင်း</a></li>
      <li><a class="dropdown-item" href="#">ပုံပြကွန်း</a></li>
    </ul>
  </div>
</div>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ

အဆိုပါ ပေါင်းစပ်ကုဒ် နှင့် ခွဲခြားထားသော သတင်းအချက် ကို ပေးပို့ပါ

အကျိုးသက်ရောက်မှု

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">ဟော်ဗီ</button>
  <button type="button" class="btn btn-primary">ဒီဂျင်</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">ရှိုင်း</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">လက်တင်း</a></li>
      <li><a class="dropdown-item" href="#">ပုံပြကွန်း</a></li>
    </ul>
  </div>
</div>

ကိုယ်တိုင် ကြိုးစားကြည့်ပါ