جداول

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو


جدول ساده در بوت استرپ

یک جدول ساده بوت استرپ یک لایه سبک و فقط تقسیم‌کننده‌های افقی دارد.[۱]

کلاس .table استایل (Styling) ساده را به جدول اضافه می‌کند:

مثال


مشاهدهٔ نتیجه


Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com

ردیف های راه راه (Stripped)

کلاس .table-striped نوارهای راه راه (Zebra-Stripes) را به جدول اضافه می‌کنند:

مثال


مشاهدهٔ نتیجه


Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com

جدول کادر دار

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

مثال


مشاهدهٔ نتیجه


Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com

ردیف های شناور (Hover)

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

مثال


مشاهدهٔ نتیجه


Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com

جدول متراکم

کلاس .table-condensed جدول را با حذف نیمی از لایه‌ها فشرده‌تر می‌کند:

مثال


مشاهدهٔ نتیجه


Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com

کلاس های متنی

کلاس‌های متنی را می‌توان برای رنگ آمیزی ردیف‌ها (<tr>) یا سلول‌های جدول (<td>) به کار برد:

مثال


مشاهدهٔ نتیجه


Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com

کلاس‌های متنی که می‌توان استفاده کرد عبارتند از:

کلاس توضیحات
.active رنگ شناور را به ردیف یا سلول جدول اعمال می‌کند
.success عمل مثبت یا موفقیت آمیز را نشان می‌دهد
.info یک عمل یا تغییر آموزنده خنثی را نشان می‌دهد
.warning هشداری را نشان می‌دهد که شاید نیازمند اقدام باشد
.danger نشان دهنده عمل منفی بالقوه یا خطرناک است

جداول واکنش گرا

کلاس .table-responsive یک جدول واکنش‌گرا ایجاد می‌کند. سپس جدول در دستگاه‌های کوچک (کمتر از ۷۶۸ پیکسل) بطور افقی قابل پیمایش است. هنگام نمایش در دستگاه‌های عریض‌تر از ۷۶۸ پیکسل، تفاوتی ندارد:

مثال

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


مشاهدهٔ نتیجه


تمرینات بوت استرپ

مرجع کامل جدول بوت استرپ

برای دسترسی به مرجع کامل همه کلاس‌های جدول، به مرجع کامل جدول‌های بوت استرپ مراجعه کنید.

منابع آموزشی