gif
از دست ندهید! به‌روزرسانی جدید منتشر شده است.
gif
چیزی که دوست دارید اکنون در فروش است!
هم اکنون بخرید!

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

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

Basic Table With Border Bottom Color

Use a classtable to any table, and .border-bottom-*class for Border bottom color
ردیف نام نام خانوادگی نام کاربری تعیین شرکت زبان کشور
1 profileرام جیکوب وولف RamJacob@twitter توسعه دهنده Apple Inc. PHP IND
2 profileجان دیو Gummer JohnDeo@twitter طراح Hewlett packard HTML ایالات متحده
3 profileالانا جان کازال ElanaJohn@twitter طراح مایکروسافت پگ بریتانیا
4 مریل استریپ رابرتز MerylStreep@twitter برنامه‌نویس Tata Ltd. واکنش کنید IDN
5 اما استون سنگ EmmaStone@twitter برنامه‌نویس Wipro Ltd. Vue IRN
6 الیانا جونز جان ElianaJons@twitter برنامه‌نویس Info Ltd. Vue IRN

Inverse Table

Use a class table-inverse inside table element.
ردیف نام نام خانوادگی دفتر موقعیت حقوق تاریخ عضویت سن
1 استفان Laiten توکیو حسابدار 2100.00 دلار 21/01/2022 20
2 فای ون دام لندن مدیرعامل 1420.00 دلار 14/02/2022 22
3 بروین Oleveria نیویورک مهندس نرم افزار 1340.00 دلار 04/06/2022 18
4 رجینا اوتاندی فرانسه پشتیبانی پیش فروش 3400.00 دلار 10/08/2022 25
5 وانی شاه لس آنجلس توسعه‌دهنده ارشد 3500.00 دلار 23/07/2022 28

Hoverable Rows With Horizontal Border

Hoverable row use a class table-hover and for Horizontal border use a class .table-border-horizontal , Solid border Use a class.border-solid .tableclass.
ردیف وضعیت نام سیگنال امنیت مرحله برنامه ریزی سرپرست تیم
1 بدون سیگنال Astrid: NE اشتراک‌گذاری شده مدیریت شده متوسط تریاژ شده 0.33 تعقیب نگوین
2 آفلاین Cosmo: prod shared ares بزرگ تریاژ شده 0.39 بری فورمن
3 آنلاین Phoenix: prod به اشتراک گذاشته lyra-lists کوچک بدون تریاژ 3.12 جرمی لیک
4 بدون سیگنال Astrid: NE اشتراک‌گذاری شده مدیریت شده ناچیز تریاژ شده 13.18 آنجلیکا هاواردز
5 آنلاین Astrid: NE اشتراک‌گذاری شده مدیریت شده متوسط بدون تریاژ 5.33 دایان اوکوما

Inverse Table with Primary background

Use a class .bg-info, .bg-success, .bg-warning and .bg-danger classes. with light text on dark backgrounds inside table element.
To set the light background color use .bg-[color] class where [color] is the value of your selected color from stack color palette. So for teal color background class will be .bg-teal
ردیف نام نام خانوادگی شرکت حجم اعتبار نام کاربری نقش کشور
1 رام جیکوب وولف Apple Inc. 3500.00 دلار RamJacob@twitter برنامه‌نویس IND
2 جان دیو گومر Hewlett packard 2400.00 دلار JohnDeo@twitter طراح ایالات متحده
3 الانا جان وولف مایکروسافت 2560.00 دلار ElanaJohn@twitter طراح بریتانیا
4 مریل استریپ رابرتز Tata Ltd. 1870.00 دلار MerylStreep@twitter برنامه‌نویس IND
5 اما استون سنگ Wipro Ltd. 4580.00 دلار EmmaStone@twitter برنامه‌نویس IRN
6 الیانا جونز جان Info Ltd. 4580.00 دلار ElianaJons@twitter برنامه‌نویس IRN

Caption

A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
فهرست کاربران
ردیف نام کارمند ایمیل تجربه سکس شماره تماس سن
1 الانا رابرت ElanaRob@gmail.com 1 سال مرد +91 9789887777 28
2 استیفن دیو Stiphen@yahoo.com 6 ماه مونث 9874563210+91 22
3 جنلیا اوتر Genelia@gmail.com 2 روز مرد +91 8794562135 24

Table head options

Similar to tables , use the modifier classes.table-[color] to make theadappear in any color.
ردیف نام نام خانوادگی نام کاربری
1 علامت گذاری اتو @mdo
2 یعقوب تورنتون @fat
3 لری پرنده @twitter

Striped Row with Inverse Table

Use .table-striped to add zebra-striping to any table row within the . This styling doesn't work in IE8 and below as :nth-child CSS selector isn't supported.
ردیف دسر کالری چاق قیمت
1 KitKat 518 26 20
2 دونات 452 25 80
3 Eclair 262 16 10

Breckpoint Specific

Use .table-responsive"❴-sm|-md|-lg|-xl|-xxl❵" functions like a heading for a table. It helps users with screen readers to find a table and understand what it’s about and decide if they want to read it.
ردیف نام شناسه سفارش قیمت تعداد مجموع
1 آیفون X خاکستری C12345 12550 دلار 1 12550 دلار
2 Titan Watch A14725 120 دلار 2 250 دلار
3 Apple Airpods B54213 210 دلار 1 210 دلار

Responsive Tables With Light Background

A .table-responsive ,.light-card inside table element.
ردیف وظیفه ایمیل تلفن اختصاص تاریخ قیمت وضعیت پیشرفت
1 توسعه وب Pixel@efo.com +91 7874226671 مارک جکنو 12/07/2022 2315.00 دلار درانتظار 75%
2 طراحی گرافیک Strap@google.com +91 8347855785 الانا جان 23/08/2022 4125.00 دلار در انتظار 45%
3 وردپرس Pixelstrap@gmail.com 635609347 91+ جان دیو 15/04/2022 6123.00 دلار تکمیل 100%

Sizing Tables

Example of Extra large table, Add.table-xl class to the.table , Large table Add .table-lg , Default table Add .table-de , Small table Add .table-sm , Extra Small table Add .table-xsto create a table.
ردیف نام کارمند تاریخ وضعیت ساعت عملکرد
1 مارک جکنو 22/08/2022 در مرخصی 0 29/30
2 الانا رابرت 2022/08/21 ارائه 10 30/30
3 جان دیو 18/08/2022 در مرخصی 8 28/30

Custom Table Color With Hover And Stripped

Use class table-hover, table-striped table-*table-info,table-success,table-success,table-info,table-danger,table-primary,table-secondary,table-light,table-active inside table element.
ردیف عنوان فیلم آزاد شد استودیو بودجه درآمد ناخالص داخلی
1 یخ زده 2013 دیزنی 150,000,000 دلار 400,953,009 دلار
2 مینیون ها 2015 جهانی 74,000,000 دلار 336,045,770 دلار
3 زوتوپیا 2016 دیزنی 150,000,000 دلار 341,268,248$
4 دریافتن دوری 2016 Disney Pixar 175,000,000 دلار $486,295,561
5 داستان اسباب بازی 3 2010 Disney Pixar 200,000,000 دلار 415,004,880 دلار

Dashed Border

Dashed border use class .table-dashed , for Dotted border use class.table-dotted, for Double border use class.table-Double
شناسه نام کلاس نوع ساعت مربی نقاط
1 Crit Cardio سالن ورزشی 9:00 صبح تا 11:00 صبح آرون چپمن 10
2 رقص زومبا رقص 8:00 صبح - 9:00 صبح دونا ویلسون 12
3 مثل یک پروانه بوکس 9:00 صبح تا 10:00 صبح رندی پورتر 13
4 Pilates Reformer سالن ورزشی 7:00 صبح - 8:30 صبح آرون چپمن 15
5 ذهن و بدن یوگا 8:00 صبح - 9:00 صبح آدام استوارت 20