Bootstrap 5 အချက်အလက်

ကျောက်ချို

Bootstrap 5 တွင် ကျောက်ချို သည် အကြီးအကျယ် ရှိသော အကိုးအခံ ဖြစ်ပြီး အရောင် အရောင် အပိုင်းများ အနီးအနား အပြင်ဘက် အပြင်ဘက် အကျယ်းကျယ်း ဖြစ်သည်။ အချက်အလက်၊ အချက်အလက် နှင့် အရောင် စသည်များ ပါဝင်သည်။

အခြေခံ ကျောက်ချို

အခြေခံ ကျောက်ချို .card အမှတ်အသား ဖွဲ့စည်းထားသော .card-body အမှတ်အသား

实例


  <div class="card-body">အခြေခံ ကျောက်ချို</div>

亲自试一试

အချက်အလက် နှင့် ထောင်ပုံ

.card-header အချက်အလက် ကျောက်ချို ထပ်ပေးရန် အမှတ်အသား.card-footer အချက်အလက် ကျောက်ချို ထပ်ပေးရန် အမှတ်အသား

实例


  <div class="card-header">အချက်အလက်</div>
  <div class="card-body">အရောင်</div>
  <div class="card-footer">ထောင်ပုံ</div>

亲自试一试

နောက်ခံ ကျောက်ချို

ကျောက်ချိုသည် နောက်ခံ အရောင် ထပ်ပေးရန် အသံအရောင် အမှတ်အသား အသုံးပြုပါ။

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

实例

亲自试一试

အမည်၊ အချက်အလက် နှင့် လွှတ်ခွင့်

သုံးပါ .card-title ကျောက်ချိုသည် မည်သည့် အချက်အလက်မျှ သို့ ထပ်သင့်သည်။ ကျောက်ချိုအမည်

အကိုးအခံ .card-body ပြင်းထန်သောပုံစံ၏ နောက်ဆုံးအပိုင်း(သို့)တစ်ခုတည်းသော အပိုင်း .card-text 类用于移除

元素的底部边距。.card-link 类为任意链接添加蓝色和悬停效果。

实例


  

    
卡片标题

    
一些实例文本。一些实例文本。

    卡片链接
    另一个链接

亲自试一试

卡片图像

将 .card-img-top 或 .card-img-bottom 添加到 ，可将图像放置在卡片的顶部或底部。

请注意，我们在 .card-body 之外添加了图像以跨越整个宽度：

实例


  Card image
  

    
Bill Gates

    
Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。

    查看个人资料

亲自试一试

卡片图像叠加

将图像转换为卡片背景并使用 .card-img-overlay 在图像顶部添加文本：

实例


  Card image
  

    
Bill Gates

    
一些示例文本。一些示例文本。

    查看个人资料

亲自试一试