Bootstrap 5 စာရင်း

အခြေခံ အချက်အလက်

အခြေခံ အေအိုင်အက်စ် အေအိုင်အက်စ် အချက်အလက် တစ်ခုခုတွင် အဆင်းမြင့် အကြား အဆင်းမြင့် အချက်အလက် နှင့် ရှိ အဆင်းမြင့် အကြား အချက်အလက်

.table အချက်အလက်ကို အခြေခံ အေအိုင်အက်စ် အေအိုင်အက်စ် အုတ်ပုံပြုပါ:

实例

亲自试一试

အဆိုပါ အချက်အလက်

.table-striped အချက်အလက်တွင် အသင့်အတော်အချိန် အဆိုပါ အချက်အလက်ကို ပြုပါ:

实例

亲自试一试

အကြောင်းတံခွန်းပါ အချက်အလက်

.table-bordered အချက်အလက်နှင့် အဆိုပါ အချက်အလက်များ အကြီးအကျယ် အကြောင်းတံခွန်းကို ပြုပါ:

实例

亲自试一试

လက်ဆင်းမှုအကျိုးပြု နိုင်သော အချက်အလက်

.table-hover အချက်အလက်တစ်ခုခုတွင် လက်ဆင်းမှုအကျိုးပြု ပြီး ဂရုပ်ဖျက်အောင် ပြုပါ:

实例

亲自试一试

အရောင်ရှိ/ရူပ် အချက်အလက်

.table-dark အချက်အလက်ကို အရောင်ရှိ အပိုင်းအခြားများ ပြုပါ:

实例

亲自试一试

ရူပ်အချက်အလက်

ပေါင်း .table-dark နှင့် .table-striped ရူပ်အချက်အလက်ကို ဖန်တီးပါ:

实例

亲自试一试

လက်ဆင်းမှုအကျိုးပြု နိုင်သော ရူပ်အချက်အလက်

.table-hover အချက်အလက်တစ်ခုခုတွင် လက်ဆင်းမှုအကျိုးပြု ပြီး ဂရုပ်ဖျက်အောင် ပြုပါ:

实例

亲自试一试

အကြောင်းတံခွန်းမပါဘဲသော အချက်အလက်များ

.table-borderless အချက်အလက်များမှ အကြောင်းတံခွန်းကို ဖျက်သိမ်းပါ:

实例

亲自试一试

上下文类

上下文类可用于为整个表格 (

)、表格行 () 或表格单元格 (
) 着色。

实例

亲自试一试

可用的上下文类：

类 描述
.table-primary 蓝色：表示重要动作。
.table-success 绿色：表示成功或积极的动作。
.table-danger 红色：表示危险或潜在的负面行为。
.table-info 浅蓝色：表示中性的信息更改或操作。
.table-warning 橙色：表示可能需要注意的警告。
.table-active 灰色：将悬停颜色应用于表格行或表格单元格。
.table-secondary 灰色：表示不太重要的动作。
.table-light 浅灰色表格或表格行背景。
.table-dark 深灰色表格或表格行背景。

表头颜色

您还可以使用任何上下文类只向表格标题添加背景颜色：

实例

亲自试一试

小型表格

.table-sm 类通过将单元格填充减半来使表格变小：

实例

亲自试一试

响应式表格

.table-responsive 类在需要时向表格添加滚动条（当它在水平方向上太大时）：

实例


  
    ...

亲自试一试

您还可以决定表格何时应该获得滚动条，具体取决于屏幕宽度：

类 屏幕宽度
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

实例


  
    ...

亲自试一试