Bootstrap 4 စာရင်းအုပ်စုများ
အခြေခံစာရင်းအုပ်စုများ
အခြေခံအကျဆုံးစာရင်းအုပ်စုသည် စာရင်းမသွင်းထားသောစာရင်းတစ်ခုဖြစ်သည်-
- ပထမအချက်
- ဒုတိယအချက်
- တတိယအချက်
အခြေခံစာရင်းအုပ်စုတစ်ခုဖန်တီးရန် ၊
အတန်းနှင့် အတန်းပါ <ul>ဒြပ်စင် တစ်ခုကို အသုံးပြုပါ ။.list-group<li>.list-group-item
ဥပမာ
<ul class="list-group">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
တက်ကြွသောပြည်နယ်
- အသက်ဝင်သောအရာ
- ဒုတိယအချက်
- တတိယအချက်
.activeလက်ရှိအကြောင်းအရာကို မီးမောင်းထိုးပြရန် အတန်း ကို အသုံးပြုပါ -
ဥပမာ
<ul class="list-group">
<li class="list-group-item
active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third 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">First item</a>
<a
href="#" class="list-group-item list-group-item-action">Second item</a>
<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
မသန်စွမ်းသည့်အရာ
.disabledအတန်းသည် ပိတ်ထားသည့်အရာသို့ ပေါ့ပါးသော စာသားအရောင်ကို ပေါင်းထည့်သည် ။ လင့်ခ်များပေါ်တွင် အသုံးပြုသောအခါ၊ ၎င်းသည် hover effect ကို ဖယ်ရှားလိမ့်မည်-
ဥပမာ
<div class="list-group">
<a href="#" class="list-group-item disabled">Disabled item</a>
<a href="#"
class="list-group-item disabled">Disabled item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
နယ်နိမိတ်များကို ဖယ်ရှား/ဖျက်ပါ။
.list-group-flushဘောင်အချို့နှင့် လုံးဝန်းသောထောင့်များကို ဖယ်ရှားရန် အတန်း ကို အသုံးပြုပါ -
- ပထမအချက်
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
ဥပမာ
<ul class="list-group
list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth item</li>
</ul>
အလျားလိုက် စာရင်းအုပ်စုများ
စာရင်းအရာများကို ဒေါင်လိုက်အစား အလျားလိုက်ပြသလိုပါက (တစ်ခုနှင့်တစ်ခုအပေါ်တွင်အစား ဘေးချင်းကပ်လျက်) .list-group-horizontalအတန်းကို ထည့်ပါ .list-group-
- ပထမအချက်
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
ဥပမာ
<ul class="list-group
list-group-horizontal">
<li class="list-group-item">First item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
<li class="list-group-item">Fourth 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">Success item</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စာရင်းအုပ်စုအတွင်း တံဆိပ်များထည့်ရန် အသုံးဝင်မှု/အကူအညီပေးသည့်အတန်းများနှင့် အတန်းများကို ပေါင်းစပ် ပါ-
- ဝင်စာ ၁၂
- ကြော်ငြာများ ၅၀
- ပေါက်ကရ ၉၉
ဥပမာ
<ul class="list-group">
<li class="list-group-item d-flex
justify-content-between align-items-center">
Inbox
<span class="badge badge-primary badge-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge badge-primary
badge-pill">50</span>
</li>
<li class="list-group-item
d-flex justify-content-between align-items-center">
Junk
<span class="badge badge-primary badge-pill">99</span>
</li>
</ul>
အကြံပြုချက်- ကျွန်ုပ်တို့၏ BS4 Utilities အခန်း တွင် Bootstrap 4 Utility/Helper အတန်းများအကြောင်း ပိုမိုဖတ်ရှုပါ ။