جداول Bootstrap 5

جدول پایه

یک جدول پایه Bootstrap 5 کمی فضای داخلی دارد و خطوط افقی.

.table کلاس استایل‌های پایه به جدول اضافه می‌کند:

مثال

خود کو کچھ کریں

خطوط

.table-striped کلاس خطوط را به جدول اضافه می‌کند:

مثال

خود کو کچھ کریں

جدول با حاشیه

.table-bordered کلاس حاشیه‌های همه سلول‌ها و جدول را اضافه می‌کند:

مثال

خود کو کچھ کریں

خطوط با اثر انگشت

.table-hover کلاس اثر انگشت را به خطوط جدول اضافه می‌کند (رنگ پس‌زمینه خاکستری):

مثال

خود کو کچھ کریں

جدول سیاه/تاریک

.table-dark کلاس پس‌زمینه سیاه به جدول اضافه می‌کند:

مثال

خود کو کچھ کریں

جدول خطوط تاریک

ادغام .table-dark و .table-striped برای ایجاد جدول خطوط تاریک استفاده کنید:

مثال

خود کو کچھ کریں

جدول تاریک قابل اثر انگشت

.table-hover کلاس اثر انگشت را به خطوط جدول اضافه می‌کند (رنگ پس‌زمینه خاکستری):

مثال

خود کو کچھ کریں

جدول بدون حاشیه

.table-borderless کلاس کادرهای جدول را حذف می‌کند:

مثال

خود کو کچھ کریں

کونسکٹ کلاس

کونسکٹ کلاس کو پورے جدول (<table>)، جدول سطر (<tr>) یا جدول سلول (<td>) رنگ کیا جاسکتا ہے

مثال

خود کو کچھ کریں

موجود کونسکٹ کلاس:

کلاس وصف
.table-primary نیلا: اہم کارروائی کا مظاہرہ کرتا ہے
.table-success سبز: کسی کامیابی یا مثبت کارروائی کا مظاہرہ کرتا ہے
.table-danger لچیلا: خطرہ یا ممکنہ منفی کارروائی کا مظاہرہ کرتا ہے
.table-info نوآبادی نیلا: کسی میانی معلومات یا کارروائی کا مظاہرہ کرتا ہے
.table-warning نارنجی: کسی ممکنہ تنبیه کا مظاہرہ کرتا ہے
.table-active کالائی: جدول کی سطر یا سلول کی سولنگ رنگ کا استعمال کیا جاتا ہے
.table-secondary کالائی: کسی کم اہم کارروائی کا مظاہرہ کرتا ہے
.table-light نوآبادی جدول یا جدول کی سطر کا پس منظر رنگ
.table-dark کالائی جدول یا جدول کی سطر کا پس منظر رنگ

سرکردگی کا رنگ

آپ اور کسی جدول کی سرکردگی کو پس منظر رنگ کرسکتے ہیں، جس میں کسی کونسی کونسکٹ کلاس استعمال کی جاسکتی ہے:

مثال

خود کو کچھ کریں

چھوٹی جدول

.table-sm کلاس جدول کو کم کرتا ہے، جس میں سلول کی پُرائز کا نصف کردار اٹھایا جاتا ہے:

مثال

خود کو کچھ کریں

پاسدار جدول

.table-responsive کلاس جدول کو سکرول باری کرسکتا ہے (جب یہ افقی طور پر بہت بڑا ہوتا ہے):

مثال

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

خود کو کچھ کریں

آپ اور فی الحال کسی جدول کو سکرول باری کرسکتے ہیں، جو اسکرین چوڑائی کی بنیاد پر ہوتا ہے:

کلاس اسکرین چوڑائی
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px
.table-responsive-xxl < 1400px

مثال

<div class="table-responsive-sm">
  <table class="table">
    ...
  </table>
</div>

خود کو کچھ کریں