Bootstrap 5 စာရင်းအုပ်

အဓိက စာအုပ်အချက် စာအုပ်စာတမ်း

အဓိက စာအုပ်အချက် စာအုပ်စာတမ်း အတွက် အသေးစား စာအုပ်အချက် စာအုပ်စာတမ်း အသုံးပြီး အသင်းအဖွဲ့ အသင်းဖွဲ့ ကို ပေါင်းစပ်ပါ

အသေးစား စာအုပ်အချက် စာအုပ်စာတမ်း အတွက် အမျိုးအစား .list-group .list-group-item <ul> မိတ်ဆက်ပါ အသေးစား စာအုပ်အချက် စာအုပ်စာတမ်း ကို ဖန်တီးရန် သုံးပါ အက်ဥ္ဇာ နှင့် အမျိုးအစား .list-group-item <li> အက်ဥ္ဇာ

အကျိုးသက်

<ul class="list-group">
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
</ul>

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

လက်ရှိ အခြေအနေ

သုံးပါ .active အချက်ပြောင်းခြင်း အသုံးပြီး လက်ရှိ အချက်ကို သေချာစွာ ဖော်ပြပါ

အကျိုးသက်

<ul class="list-group">
  <li class="list-group-item active">လက်ရှိပါ အချက်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
</ul>

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

မိတ်ဆက်ပါ အသေးစား စာအုပ်အချက် စာအုပ်စာတမ်း

မိတ်ဆက်ပါ အသေးစား စာအုပ်အချက် စာအုပ်စာတမ်း ကို ဖန်တီးရန် သုံးပါ <div> အစား <ul>၊ အစား <a> အစား <li>。ဝေးဝေးပြီး မိတ်ဆက်ကို လျှပ်ရိုက်ခြင်း မှာ ဂရုပ်သုံးပြီး ခြိုက်သုံး ကို ထပ်ပေါင်းပါ .list-group-item-action အမျိုးအစား：

အကျိုးသက်

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">ပထမပါး</a>
  <a href="#" class="list-group-item list-group-item-action">ဒုတိယပါး</a>
  <a href="#" class="list-group-item list-group-item-action">တတိယအက်ဥ်</a>
</div>

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

အပိုက်အပိုက်အက်ဥ်

.disabled အက်ဥ်များကို အပိုက်အပိုက်အက်ဥ်များအတွက် အနည်းငယ်သော အပြားအောက်အက်ဥ်များကို ထပ်ပေါင်းပါ၊ လေးပြားပြီး လေးအောက်ခြောက်ကို ဖယ်ရှားပါ:

အကျိုးသက်

<div class="list-group">
  <a href="#" class="list-group-item disabled">အပိုက်အပိုက်အက်ဥ်</a>
  <a href="#" class="list-group-item disabled">အပိုက်အပိုက်အက်ဥ်</a>
  <a href="#" class="list-group-item">တတိယအက်ဥ်</a>
</div>

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

နယ်ခြားအောက်ခြောက်နှင့် အောက်ခ�ောက်ကို

အက်ဥ်များကို .list-group-flush အက်ဥ်များကို နယ်ခြားအောက်ခြောက်နှင့် အောက်ခြောက်ကို ဖယ်ရှားပါ:

အကျိုးသက်

<ul class="list-group list-group-flush">
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
</ul>

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

အစားထိုးပြီး အစားထိုးပြီးမှ ပြသချင်လျှင်

အက်ဥ်များကို .list-group-numbered အက်ဥ်များကို အစားထိုးပြီး အစားထိုးပြီးမှ ပြသချင်လျှင်:

အကျိုးသက်

<ol class="list-group list-group-numbered">
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
</ol>

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

လေးတန်းအစား အက်ဥ်အက်ဥ်

အက်ဥ်အက်ဥ်များကို လေးတန်းအစား အဆိုင်ချိန်အစား ပြသချင်လျှင်(အဆိုင်ချိန်များကို ပြန်ပြီး ပြုပြီးမှ ပြသချင်လျှင်) အက်ဥ်များကို: .list-group-horizontal အက်ဥ်များကို .list-group:

အကျိုးသက်

<ul class="list-group list-group-horizontal">
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
  <li class="list-group-item">တတိယအက်ဥ်</li>
</ul>

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

အရာဝတ္တရပါးအက်ဥ်

အရာဝတ္တရပါးအက်ဥ်များကို နေရာချိုးရာတွင်သုံးပါသည်:

နေရာချိုးရာတွင်သုံးပါသောအက်ဥ်များကို:

  • .list-group-item-success
  • .list-group-item-secondary
  • .list-group-item-info
  • .list-group-item-warning
  • .list-group-item-danger
  • .list-group-item-primary
  • .list-group-item-dark
  • .list-group-item-light

အကျိုးသက်

<ul class="list-group">
  <li class="list-group-item list-group-item-success">အောင်မြတ်သောအက်ဥ်</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

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

ပြင်းပြောင်းသောအကြောင်းအရာဖြင့်ရှိသောလမ်းခွဲများ

အကျိုးသက်

<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-action list-group-item-light">Light item</a>
</div>

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

အော်ခေါင်း ပါ စာရင်းဖွဲ့

ပေး .badge အမျိုးမျိုးသော အကျိုးသက် နှင့် utility/helper အမျိုးမျိုး ပေါင်းစပ်လျက် စာရင်းဖွဲ့ တွင် အော်ခေါင်း ထပ်ပေါင်းနိုင်ပါသည်

အကျိုးသက်

<ul class="list-group">
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ခွင့်အခွင့်
    <span class="badge bg-primary rounded-pill">12</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    ဒေါ်လုံး သတင်း
    <span class="badge bg-primary rounded-pill">50</span>
  </li>
  <li class="list-group-item d-flex justify-content-between align-items-center">
    အသတ်ရပ်
    <span class="badge bg-primary rounded-pill">99</span>
  </li>
</ul>

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