جدول‌ها

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Bootstarp4-menu.png
موارد آموزشی
۱خانه
۲شروع
۳ظرف‌ها
۴شبکه‌بندی پایه
۵تایپوگرافی
۶رنگ‌ها
۷جدول‌ها
۸تصاویر
۹جامبوترون
۱۰هشدارها
۱۱کلیدها
۱۲گروه‌های کلید
۱۳نشان‌ها (Badges)
۱۴نوارهای پیشرفت
۱۵Spinnerها
۱۶صفحه‌بندی
۱۷گروه‌های لیست
۱۸کارت‌ها
۱۹منوهای کرکره‌ای
۲۰Collapse
۲۱Navها
۲۲Navbar
۲۳فرم‌ها
۲۴ورودی‌ها
۲۵گروه‌های ورودی
۲۶فرم‌های سفارشی
۲۷Carousel
۲۸Modal
۲۹راهنمای ابزار
۳۰Popover
۳۱Toast
۳۲Scrollspy
۳۳امکانات
۳۴Flex
۳۵آیکن‌ها
۳۶Media Objects
۳۷فیلترها
شبکه‌بندی
Theme
مرجع

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

یک جدول ساده بوت استرپ ۴ یک حاشیه درونی (به انگلیسی: 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 افقی به جدول اضافه می‌کند. هنگام نمایش در دستگاه‌های بزرگتر از ۹۹۲ پیکسل، هیچ تفاوتی وجود ندارد:

مثال

1 <div class="table-responsive">
2   <table class="table">
3     ...
4   </table>
5 </div>


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


همچنین می‌توان انتخاب کرد که براساس عرض صفحه نمایش چه زمانی جدول نیاز به scrollbar دارد:

کلاس عرض صفحه
.table-responsive-sm < 576px
.table-responsive-md < 768px
.table-responsive-lg < 992px
.table-responsive-xl < 1200px

مثال

1 <div class="table-responsive-sm">
2   <table class="table">
3     ...
4   </table>
5 </div>


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



منابع آموزشی