Bootstrap စာရင်းအုပ်စုများ
အခြေခံစာရင်းအုပ်စုများ
အခြေခံအကျဆုံးစာရင်းအုပ်စုသည် စာရင်းမ၀င်သောစာရင်းတစ်ခုဖြစ်သည်။
- ပထမအချက်
- ဒုတိယအချက်
- တတိယအချက်
အခြေခံစာရင်းအုပ်စုတစ်ခုဖန်တီးရန် ၊
အတန်းနှင့် အတန်းပါ <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>
တံဆိပ်များဖြင့် အဖွဲ့ကို စာရင်းပြုစုပါ။
စာရင်းအုပ်စုတစ်ခုသို့ တံဆိပ်များကိုလည်း ထည့်နိုင်သည်။ တံဆိပ်များကို ညာဘက်တွင် အလိုအလျောက် နေရာချထားမည်-
- ၁၂ အသစ်
- ၅ ဖျက်လိုက်
- ၃ သတိပေးချက်များ
တံဆိပ်တစ်ခုဖန်တီးရန်၊
စာရင်းအကြောင်းအရာအတွင်းတွင် <span>အတန်းနှင့် အစိတ်အပိုင်း တစ်ခုကို ဖန်တီးပါ-.badge
ဥပမာ
<ul class="list-group">
<li class="list-group-item">New <span class="badge">12</span></li>
<li class="list-group-item">Deleted <span class="badge">5</span></li>
<li class="list-group-item">Warnings <span class="badge">3</span></li>
</ul>
လင့်ခ်ချိတ်ထားသော အရာများဖြင့် အုပ်စုကို စာရင်းပြုစုပါ။
စာရင်းအုပ်စုရှိ အရာများသည် ဟိုက်ပါလင့်ခ်များ ဖြစ်နိုင်သည်။ ၎င်းသည် အမြင့်ပေါ်တွင် မီးခိုးရောင် နောက်ခံအရောင်ကို ထည့်ပါမည်-
လင့်ခ်ချိတ်ထားသော အရာများပါရှိသော စာရင်းအုပ်စုတစ်ခုကို ဖန်တီးရန်၊ <div>အစား <ul>
နှင့် <a>အစားကို အသုံးပြုပါ <li>-
ဥပမာ
<div class="list-group">
<a href="#" class="list-group-item">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
တက်ကြွသောပြည်နယ်
.activeလက်ရှိအကြောင်းအရာကို မီးမောင်းထိုးပြရန် အတန်း ကို အသုံးပြုပါ -
ဥပမာ
<div class="list-group">
<a href="#" class="list-group-item active">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
မသန်စွမ်းသည့်အရာ
အောက်ပါစာရင်းအုပ်စုတွင် ပိတ်ထားသည့်အရာတစ်ခု ရှိသည်-
ပစ္စည်းတစ်ခုကို ပိတ်ရန်၊ .disabledအတန်းကို ထည့်ပါ-
ဥပမာ
<div class="list-group">
<a href="#" class="list-group-item disabled">First item</a>
<a href="#" class="list-group-item">Second item</a>
<a href="#" class="list-group-item">Third item</a>
</div>
ဆက်စပ်အတန်းများ
ရောင်စုံစာရင်းပါ အကြောင်းအရာများအတွက် ဆက်စပ်မှုရှိသော အတန်းများကို သုံးနိုင်သည်-
- ပထမအချက်
- ဒုတိယအချက်
- တတိယအချက်
- စတုတ္ထအချက်
ရောင်စုံစာရင်း-ပစ္စည်းများအတွက် အတန်းများမှာ-
.list-group-item-success, list-group-item-info,
list-group-item-warning, နှင့် .list-group-item-danger:
ဥပမာ
<ul class="list-group">
<li class="list-group-item list-group-item-success">First item</li>
<li class="list-group-item list-group-item-info">Second item</li>
<li class="list-group-item list-group-item-warning">Third item</li>
<li class="list-group-item list-group-item-danger">Fourth item</li>
</ul>
စိတ်ကြိုက်အကြောင်းအရာ
စာရင်းအုပ်စုအကြောင်းအရာတစ်ခုအတွင်း HTML နီးပါးတိုင်းကို သင်ထည့်နိုင်သည်။
Bootstrap သည် အတန်းများကို ထောက်ပံ့ပေးပြီး .list-group-item-headingအောက်ပါအတိုင်း
.list-group-item-textအသုံးပြုနိုင်ပါသည်။
ဥပမာ
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">First List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Second List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Third List Group Item Heading</h4>
<p class="list-group-item-text">List Group Item Text</p>
</a>
</div>