جدول‌های Bootstrap 5
- صفحه قبلی رنگ‌های BS5
- صفحه بعدی تصاویر BS5
جدول پایه‌ای
یک جدول پایه‌ای 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>
- صفحه قبلی رنگ‌های BS5
- صفحه بعدی تصاویر BS5
