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

  2. جداول بوت استرپ
  3. جداول بوت استرپ پایه
جدول پایه
استفاده از یک کلاسtable برای هر جدول.
# نام نام خانوادگی نام کاربری نقش شهر
1 امیر صبوری rsabori@ مدیر تهران
2 نسترن کریمی nkarimi@ کاربر تهران
3 پدرام شریفی psharifi@ مدیر شیراز
4 پریسا توکلی ptavakoli@ کاربر یزد
5 یلدا صادقی ysadeghi@ مدیر تبریز
جدول معکوس
استفاده از کلاس table-inverse برای جدول معکوس
# نام نام خانوادگی نام کاربری نقش شهر
1 امیر صبوری rsabori@ مدیر تهران
2 نسترن کریمی nkarimi@ کاربر تهران
3 پدرام شریفی psharifi@ مدیر شیراز
4 پریسا توکلی ptavakoli@ کاربر یزد
5 یلدا صادقی psharifi@ مدیر تبریز
جدول معکوس با پس زمینه اولیه
از کلاس‌ های .bg-info، .bg-success، .bg-warning و .bg-danger استفاده کنید. با متن روشن در پس زمینه تیره در داخل عنصر جدول.
برای تنظیم رنگ پس زمینه روشن از کلاس bg-[color]. که در آن [color] مقدار رنگ انتخابی شما از پالت رنگ پشته است استفاده کنید. بنابراین برای کلاس پس زمینه رنگ سبز آبی .bg-teal خواهد بود
# نام نام خانوادگی نام کاربری نقش شهر
1 امیر صبوری rsabori@ مدیر تهران
2 نسترن کریمی nkarimi@ کاربر تهران
3 پدرام شریفی psharifi@ مدیر شیراز
4 پریسا توکلی ptavakoli@ کاربر یزد
5 یلدا صادقی psharifi@ مدیر تبریز
ردیف های قابل هاور
از کلاس table-sover برای فعال کردن حالت شناور در ردیف‌های جدول در tbody استفاده کنید.
# نام نام خانوادگی نام کاربری نقش شهر
1 امیر صبوری rsabori@ مدیر تهران
2 نسترن کریمی nkarimi@ کاربر تهران
3 پدرام شریفی psharifi@ مدیر شیراز
4 پریسا توکلی ptavakoli@ کاربر یزد
5 یلدا صادقی psharifi@ مدیر تبریز
کلاس های متنی
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید. میتوانید از کلاس های table-primary,table-secondary,table-success,table-info,table-warning,table-danger,table-light,table-active در tr استفاده کنید
کلاس عنوان عنوان
اولیه سلول سلول
ثانویه سلول سلول
موفق سلول سلول
اطلاع سلول سلول
هشدار سلول سلول
خطر سلول سلول
روشن سلول سلول
فعال سلول سلول
ابزارهای متن یا رنگ
با این حال، انواع پس‌زمینه جدول معمولی با جدول معکوس در دسترس نیستند، شما می توانید از کلاس های bg-dark,bg-warning,bg-success,bg-info,bg-danger,bg-primary,bg-secondary,bg-light در td استفاده کنید
# عنوان عنوان
1 اولیه اولیه
2 ثانویه ثانویه
3 موفق موفق
4 اطلاع اطلاع
5 هشدار هشدار
6 خطر خطر
7 روشن روشن
گزینه های سربرگ جدول
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده .table-dark استفاده کنید تا thead خاکستری روشن یا تیره به نظر برسد.
# نام نام خانوادگی نام کاربری
1 امیر صبوری asabori@
2 یلدا صادقی ysadeghi@
3 پدرام شریفی psharifi@
گزینه های سربرگ جدول
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده .bg-*و .table-light استفاده کنید تا thead خاکستری روشن یا تیره به نظر برسد.
# نام نام خانوادگی نام کاربری
1 امیر صبوری asabori@
2 یلدا صادقی ysadeghi@
3 پدرام شریفی psharifi@
ردیف های راه راه
از .table-striped برای افزودن زبرا-striping به هر ردیف جدول در استفاده کنید. این سبک در IE8 و پایین‌تر کار نمی‌کند زیرا انتخابگر CSS :nth-child پشتیبانی نمی‌شود.
# نام نام خانوادگی نام کاربری
1 امیر صبوری asabori@
2 یلدا صادقی ysadeghi@
3 پدرام شریفی psharifi@
ردیف های راه راه با جدول معکوس
از .table-striped برای افزودن زبرا-striping به هر ردیف جدول در استفاده کنید. این سبک در IE8 و پایین‌تر کار نمی‌کند زیرا انتخابگر CSS :nth-child پشتیبانی نمی‌شود.
# نام نام خانوادگی نام کاربری
1 امیر صبوری asabori@
2 یلدا صادقی ysadeghi@
3 پدرام شریفی psharifi@
کپشن
یک <caption> مانند عنوان یک جدول عمل می کند. این به کاربران دارای صفحه‌خوان کمک می‌کند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا می‌خواهند آن را بخوانند یا خیر.
لیست کاربران
# نام نام خانوادگی نام کاربری
1 امیر صبوری asabori@
2 یلدا صادقی ysadeghi@
3 پدرام شریفی psharifi@
جدول ریسپانسیو
یک <caption> مانند عنوان یک جدول عمل می کند. این به کاربران دارای صفحه‌خوان کمک می‌کند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا می‌خواهند آن را بخوانند یا خیر.
# عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول
1 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
2 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
3 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
نقاط شکست خاص
از توابع .table-responsive{-sm|-md|-lg|-xl} مانند عنوان یک جدول استفاده کنید. این به کاربران دارای صفحه‌خوان کمک می‌کند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا می‌خواهند آن را بخوانند یا خیر.
# عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول
1 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
2 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
3 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
# عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول
1 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
2 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
3 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
# عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول
1 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
2 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
3 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
# عنوان جدول عنوان جدول عنوان جدول عنوان جدول عنوان جدول
1 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
2 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول
3 سلول جدول سلول جدول سلول جدول سلول جدول سلول جدول