کارت‌های Bootstrap 5

کارت

کارت‌های Bootstrap 5 جعبه‌هایی با حاشیه هستند که محتوای اطراف آن‌ها دارای فضای داخلی هستند. این شامل سربرگ، پایین کارت، محتوا، رنگ و غیره است.

کارت مقدماتی

یک کارت مقدماتی با .card کلاس ایجاد شده، محتوای کارت دارای یک .card-body کلاس:

مثال

<div class="card">
  <div class="card-body">کارت مقدماتی</div>
</div>

خود کا تجربہ کریئن

سربرگ و پایین کارت

.card-header برای اضافه کردن عنوان به کارت، از کلاس.card-footer برای اضافه کردن پایین کارت به کارت، از کلاس

مثال

<div class="card">
  <div class="card-header">سربرگ</div>
  <div class="card-body">محتوای</div>
  <div class="card-footer">پایین کارت</div>
</div>

خود کا تجربہ کریئن

کارت محیطی

برای اضافه کردن رنگ پس‌زمینه به کارت، از کلاس‌های محیطی استفاده کنید:

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

مثال

خود کا تجربہ کریئن

عنوان، متن و لینک استفاده کنید

لطفاً از .card-title عنوان کارت را به هر عنوانی اضافه کنید. اگر <p> عنصر .card-body آخرین فرزند (یا فرزند تنها)، پس از .card-text کلاس کو <p> عنصر کی نیچل سرحد کی ماگنٹیوڈی.card-link کسی بھی لنک کی کلاس کو آبی اور ہنگر کا اثر دینا ہے۔

مثال

<div class="card">
  <div class="card-body">
    <h4 class="card-title">کارڈ عنوان</h4>
    <p class="card-text">کچھ مثال متن۔ کچھ مثال متن。</p>
    <a href="#" class="card-link">کارڈ لنک</a>
    <a href="#" class="card-link">ایک دوسرا لنک</a>
  </div>
</div>

خود کا تجربہ کریئن

کارڈ تصویر

کو .card-img-top یا .card-img-bottom کو <img>، تصویر کو کارڈ کی اوپر یا نیچل میں رکھ سکتے ہیں۔

توجہ دیئن، ہم نے .card-body کے باہر تصویر شامل کی ہے تاکہ پورا پانی کا پیمانہ پار کر سکے:

مثال

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="کارڈ تصویر">
  <div class="card-body">
    <h4 class="card-title">بیل گیتس</h4>
    <p class="card-text">بیل گیتس ایک پروگرامر اور انجینئر ہے۔ کچھ مثال متن۔ کچھ مثال متن。</p>
    <a href="#" class="btn btn-primary">پرسنل پروفائل دیکھیئن</a>
  </div>
</div>

خود کا تجربہ کریئن

کارڈ تصویر پرنسیب

تصویر کو کارڈ پس منظر میں تبدیل کریئن اور استعمال کریئن .card-img-overlay تصویر کی اوپر متن شامل کریئن:

مثال

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="کارڈ تصویر">
  <div class="card-img-overlay">
    <h4 class="card-title">بیل گیتس</h4>
    <p class="card-text">کچھ مثال متن۔ کچھ مثال متن。</p>
    <a href="#" class="btn btn-primary">پرسنل پروفائل دیکھیئن</a>
  </div>
</div>

خود کا تجربہ کریئن