Bootstrap 4 Tables
Bootstrap 4 အခြေခံဇယား
အခြေခံ Bootstrap 4 ဇယားတွင် အလင်းတန်းများနှင့် အလျားလိုက် ပိုင်းခြားချက်များ ပါရှိသည်။
.tableအတန်းသည် ဇယားတစ်ခုသို့ အခြေခံပုံစံကို ပေါင်းထည့်သည် -
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
အစင်းတန်းများ
.table-stripedအတန်းသည် စားပွဲတစ်ခုသို့ မြင်းကျားအစင်းများ ထည့်သည် -
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
နယ်နိမိတ်ဇယား
.table-borderedအတန်းသည် ဇယားနှင့် ဆဲလ်များ၏ ထောင့်အားလုံးကို ပေါင်းထည့်သည် -
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Hover Rows
အတန်း သည် .table-hoverစားပွဲအတန်းများတွင် ပြေးလွှားသည့်အကျိုးသက်ရောက်မှု (မီးခိုးရောင်နောက်ခံအရောင်) ကို ပေါင်းထည့်သည်-
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
အနက်ရောင်/အမှောင် စားပွဲ
အတန်း သည် .table-darkဇယားတွင် အနက်ရောင်နောက်ခံကို ထည့်သည်-
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
အမှောင်အစင်း စားပွဲ
ပေါင်းစပ်ပြီး .table-darkနက် .table-stripedမှောင်သော အစင်းကြောင်း စားပွဲတစ်ခု ဖန်တီးရန်-
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Hoverable Dark Table
အတန်း သည် .table-hoverစားပွဲအတန်းများတွင် ပြေးလွှားသည့်အကျိုးသက်ရောက်မှု (မီးခိုးရောင်နောက်ခံအရောင်) ကို ပေါင်းထည့်သည်-
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
နယ်နိမိတ်မဲ့ စားပွဲ
.table-borderlessအတန်းသည် ဇယားမှ ဘောင်များကို ဖယ်ရှားသည် -
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
ဆက်စပ်အတန်းများ
<table>ဆက်စပ်အတန်းများကို ဇယားတစ်ခုလုံး ( ) ၊ ဇယားအတန်းများ ( <tr>) သို့မဟုတ် ဇယားဆဲလ်များ ( ) တို့ကို အရောင်ခြယ်ရန် အသုံးပြုနိုင်သည် <td>။
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| Default | Defaultson | [email protected] |
| Primary | Joe | [email protected] |
| Success | Doe | [email protected] |
| Danger | Moe | [email protected] |
| Info | Dooley | [email protected] |
| Warning | Refs | [email protected] |
| Active | Activeson | [email protected] |
| Secondary | Secondson | [email protected] |
| Light | Angie | [email protected] |
| Dark | Bo | [email protected] |
အသုံးပြုနိုင်သော ဆက်စပ်အတန်းများမှာ-
| အတန်း | ဖော်ပြချက် |
|---|---|
.table-primary |
အပြာ- အရေးကြီးသောလုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
.table-success |
အစိမ်းရောင်- အောင်မြင်သော သို့မဟုတ် အပြုသဘောဆောင်သော လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
.table-danger |
အနီရောင်- အန္တရာယ်ရှိသော သို့မဟုတ် အပျက်သဘောဆောင်သော လုပ်ဆောင်ချက်ကို ဖော်ပြသည်။ |
.table-info |
အပြာဖျော့ဖျော့- ကြားနေ သတင်းအချက်အလက် ပြောင်းလဲမှု သို့မဟုတ် လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
.table-warning |
လိမ္မော်ရောင်- သတိထားရန် လိုအပ်နိုင်သည့် သတိပေးချက်ကို ညွှန်ပြသည်။ |
.table-active |
မီးခိုးရောင်- မောက်စ်အရောင်ကို စားပွဲအတန်း သို့မဟုတ် ဇယားဆဲလ်သို့ သက်ရောက်သည်။ |
.table-secondary |
မီးခိုး- အနည်းငယ် အရေးမကြီးသည့် လုပ်ဆောင်ချက်ကို ညွှန်ပြသည်။ |
.table-light |
မီးခိုးရောင် စားပွဲ သို့မဟုတ် စားပွဲအတန်း နောက်ခံ |
.table-dark |
မီးခိုးရောင် စားပွဲ သို့မဟုတ် စားပွဲအတန်း နောက်ခံ |
စားပွဲခေါင်းအရောင်များ
အတန်း သည် .thead-darkဇယားခေါင်းစီးများသို့ အနက်ရောင်နောက်ခံကို .thead-lightပေါင်းထည့်ကာ အတန်းသည် ဇယားခေါင်းစီးများသို့ မီးခိုးရောင်နောက်ခံကို ပေါင်းထည့်သည်-
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
စားပွဲငယ်လေး
.table-smအတန်းသည် ဆဲလ်အကွက်များကို တစ်ဝက်စီဖြတ်ခြင်းဖြင့် ဇယားကို သေးငယ်စေသည် ။
ဥပမာ
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
တုံ့ပြန်မှုဇယားများ
အတန်း သည် .table-responsiveလိုအပ်သည့်အခါတွင် ဇယားသို့ scrollbar တစ်ခုထပ်ထည့်သည် (၎င်းသည် အလျားလိုက်ကြီးလွန်းသောအခါ)
ဥပမာ
<div class="table-responsive">
<table class="table">
...
</table>
</div>
မျက်နှာပြင်အကျယ်ပေါ်မူတည်၍ ဇယားသည် မည်သည့်အချိန်တွင် scrollbar ရသင့်သည်ကို သင်ဆုံးဖြတ်နိုင်သည်-
| အတန်း | မျက်နှာပြင်အကျယ် |
|---|---|
.table-responsive-sm |
< 576px |
.table-responsive-md |
< 768px |
.table-responsive-lg |
< 992px |
.table-responsive-xl |
< 1200px |
ဥပမာ
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>