جدول‌ها
جدول ساده در بوت استرپ ۴
یک جدول ساده بوت استرپ ۴ یک حاشیه درونی (Padding) سبک و تقسیم‌کننده‌های افقی دارد.[۱]
کلاس .table استایل (Styling) ساده را به جدول اضافه می‌کند:
مثال
ردیف های راه راه (Stripped)
کلاس .table-striped نوارهای راه راه (Zebra-Stripes) را به جدول اضافه می‌کنند:
مثال
جدول کادر دار
کلاس .table-bordered کادرها را در همهٔ اضلاع جدول و سلول‌ها اضافه می‌کند:
مثال
ردیف های شناور (Hover)
کلاس .table-hover نوعی حالت شناوری (رنگ پس زمینه طوسی) به ردیف‌های جدول اضافه می‌کند:
مثال
جدول سیاه / تاریک
کلاس .table-dark رنگ پیش زمینه سیاه در جدول ایجاد می‌کند:
مثال
جدول سیاه راه راه (Stripped)
ترکیب .table-dark و .table-striped یک جدول سیاه راه راه ایجاد می‌کند:
مثال
جدول تاریک Hoverable
کلاس .table-hover اثر hover در جدول ایجاد می‌کند (رنگ پیش زمینه منفی):
مثال
جدول بدون کادر (Borderless)
کلاس .table-borderless کادرهای جدول را حذف می‌کند:
مثال
کلاس های متنی
کلاس‌های متنی را می‌توان برای رنگ آمیزی کل جدول (<table>)، ردیف‌ها (<tr>) یا سلول‌های جدول (<td>) به کار برد:
مثال
کلاس‌های متنی که می‌توان استفاده کرد عبارتند از:
| کلاس | توصیف |
|---|---|
.table-primary
|
آبی: نشان دهندهٔ عمل مهم |
.table-success
|
سبز: نشان دهندهٔ یک عمل مثبت یا موفقیت آمیز |
.table-danger
|
قرمز: نشان دهندهٔ عمل خطرناک یا منفی بالقوه |
.table-info
|
آبی روشن: نشان دهندهٔ عمل یا تغییر آموزنده خنثی |
.table-warning
|
نارنجی: نشان دهندهٔ هشداری که نیاز به بررسی دارد |
.table-active
|
طوسی: رنگ hover را به ردیف یا سلول جدول اعمال می‌کند |
.table-secondary
|
طوسی: عمل کم‌اهمیت تر را نشان می‌دهد |
.table-light
|
رنگ پیش زمینهٔ طوسی روشن برای جدول یا ردیف جدول |
.table-dark
|
رنگ پیش زمینهٔ طوسی تیره برای جدول یا ردیف جدول |
رنگ عنوان جدول ها
کلاس .thead-dark رنگ پیش زمینهٔ سیاه به عنوان‌های جدول اضافه می‌کند و کلاس .thead-light رنگ پیش زمینه طوسی به عنوان‌های جدول اضافه می‌کند:
مثال
جدول کوچک
کلاس .table-sm جدول را با نصف کردن حاشیه‌های درونی (Padding) جدول را کوچکتر می‌کند:
مثال
جدول های واکنش گرا
کلاس .table-responsive یک جدول واکنش گرا ایجاد می‌کند: در صفحه نمایش‌های کوچکتر از ۹۹۲ پیکسل (در صورت نیاز) یک scrollbar افقی به جدول اضافه می‌کند. هنگام نمایش در دستگاه‌های بزرگتر از ۹۹۲ پیکسل، هیچ تفاوتی وجود ندارد:
مثال
<div class="table-responsive">
<table class="table">
...
</table>
</div>
همچنین می‌توان انتخاب کرد که براساس عرض صفحه نمایش چه زمانی جدول نیاز به scrollbar دارد:
| کلاس | عرض صفحه |
|---|---|
.table-responsive-sm
|
< 576px |
.table-responsive-md
|
< 768px |
.table-responsive-lg
|
< 992px |
.table-responsive-xl
|
< 1200px |
مثال
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
منابع آموزشی