-
2
سبد خرید
-
مجموع سفارش: ۱,۰۰۰.۰۰
- مشاهده سبد خرید تسویه حساب
- 4
-
15
-
آوا
مدیر
جداول بوتاسترپ
جدول پایه با رنگ خط پایین
استفاده از کلاسtable-*.border-bottom-*برای رنگ خط پایین جدول
| شناسه | نام | نام خانوادگی | نام کاربری | سمت | شرکت | زبان | کشور |
|---|---|---|---|---|---|---|---|
| 1 |  ماهان |
محمدی | RamJacob@twitter | توسعه دهنده | شرکت نورا | Php | هند |
| 2 |  سعید |
محمدی | JohnDeo@twitter | طراح | شرکت ایکس | Html | هلند |
| 3 |  سهیل |
محمدی | ElanaJohn@twitter | طراح | شرکت مایکروسافت | Pug | آمریکا |
| 4 |  مهری |
محمدی | MerylStreep@twitter | توسعه دهنده | شرکت هنری | React | هند |
| 5 |  حمید |
محمدی | EmmaStone@twitter | توسعه دهنده | شرکت سافت | Vue | ایران |
| 6 | حسین |
محمدی | ElianaJons@twitter | توسعه دهنده | شرکت اطلاعات | Vue | ایران |
| 7 | ماهان |
محمدی | ElianaJons@twitter | توسعه دهنده | شرکت اطلاعات | Vue | ایران |
جدول معکوس
استفاده از کلاس.table-inverseدرون عنصر جدول.
| شناسه | نام | نام خانوادگی | دفتر | سمت | حقوق | تاریخ پیوستن | سن |
|---|---|---|---|---|---|---|---|
| 1 | محسن | محمدی | ایران | حسابدار | 2100.00 | 1400/05/12 | 20 |
| 2 | محسن | محمدی | ایران | حسابدار | 2100.00 | 1400/05/12 | 20 |
| 3 | محسن | محمدی | ایران | حسابدار | 2100.00 | 1400/05/12 | 20 |
| 4 | محسن | محمدی | ایران | حسابدار | 2100.00 | 1400/05/12 | 20 |
| 5 | محسن | محمدی | ایران | حسابدار | 2100.00 | 1400/05/12 | 20 |
ردیفهای هاور با خط افقی
برای ردیفهای هاور از کلاسtable-hover-*.table-border-horizontal-*.border-solid-*استفاده کنید.
| شناسه | وضعیت | نام سیگنال | امنیت | مرحله | برنامه زمانبندی | سرپرست تیم |
|---|---|---|---|---|---|---|
| 1 |
بدون سیگنال
|
Astrid: مدیریت مشترک NE | متوسط | مرتبشده | 0.33 | محسن |
| 2 |
آفلاین
|
Cosmo: تولید مشترک Ares | زیاد | مرتبشده | 0.39 | محسن |
| 3 |
آنلاین
|
Phoenix: تولید مشترک Lyra-Lists | کم | مرتب نشده | 3.12 | محسن |
| 4 |
بدون سیگنال
|
Astrid: مدیریت مشترک NE | ناچیز | مرتبشده | 13.18 | محسن |
| 5 | آنلاین | Astrid: مدیریت مشترک NE | متوسط | مرتب نشده | 5.33 | محسن |
جدول معکوس با پسزمینه اصلی
استفاده از کلاس
.bg-info, .bg-success, .bg-warning and .bg-danger classes.
برای تنظیم رنگ پسزمینه روشن از کلاس .bg-[color] استفاده کنید، جایی که [color] مقدار رنگ انتخابی شما از پالت رنگها است. بنابراین برای رنگ فیروزهای کلاس پسزمینه .bg-teal خواهد بود.
| شناسه | نام | نام خانوادگی | شرکت | میزان اعتبار | نام کاربری | نقش | کشور |
|---|---|---|---|---|---|---|---|
| 1 | ماهان | محمدی | شرکت نورا | 3500.00 | RamJacob@twitter | توسعه دهنده | هند |
| 2 | سعید | محمدی | شرکت ایکس | 2400.00 | JohnDeo@twitter | طراح | هلند |
| 3 | سهیل | محمدی | شرکت مایکروسافت | 2560.00 | ElanaJohn@twitter | طراح | آمریکا |
| 4 | مهری | محمدی | شرکت هنری | 1870.00 | MerylStreep@twitter | توسعه دهنده | هند |
| 5 | حمید | محمدی | شرکت سافت | 4580.00 | EmmaStone@twitter | توسعه دهنده | ایران |
| 6 | حسین | محمدی | شرکت اطلاعات | 4580.00 | ElianaJons@twitter | توسعه دهنده | ایران |
عنوان جدول
تگ
<caption>
مانند یک عنوان برای جدول عمل میکند. این به کاربرانی که از صفحهخوان استفاده میکنند کمک میکند جدول را پیدا کرده، مفهوم آن را درک کنند و تصمیم بگیرند که آیا میخواهند آن را بخوانند یا خیر.
| شناسه | نام کارمند | ایمیل | تجربه | جنسیت | شماره تماس | سن |
|---|---|---|---|---|---|---|
| 1 | الهه محمدی | ElanaRob@gmail.com | 1 سال | زن | 0912123456 | 28 |
| 2 | الهه محمدی | ElanaRob@gmail.com | 1 سال | زن | 0912123456 | 28 |
| 3 | الهه محمدی | ElanaRob@gmail.com | 1 سال | زن | 0912123456 | 28 |
گزینههای سر جدول
مشابه جدولها، از کلاسهای تغییر دهنده استفاده کنید
.table-[color]-*thead-*
که میتوانند در هر رنگی ظاهر شوند.
| شناسه | نام | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | ملیحه | محمدی | @mdo |
| 2 | ملیحه | محمدی | @fat |
| 3 | ملیحه | محمدی |
ردیف راهراه با جدول معکوس
استفاده از کلاس
.table-striped
برای اضافه کردن راهراه شدن ردیفها به هر ردیف جدول در این استایل.
| شناسه | دسر | کالری | چربی | قیمت |
|---|---|---|---|---|
| 1 | کیت کت | 518 | 26 | 20 |
| 2 | دونات | 452 | 25 | 80 |
| 3 | شکلات میوه ی | 262 | 16 | 10 |
واکنشگرا بر اساس نقطه شکست
استفاده از
.table-responsive"❴-sm|-md|-lg|-xl|-xxl❵"
مانند یک عنوان برای جدول عمل میکند. این به کاربران صفحهخوان کمک میکند جدول را پیدا کرده، مفهوم آن را درک کنند و تصمیم بگیرند که آیا میخواهند آن را بخوانند یا خیر.
| شناسه | نام | شناسه سفارش | قیمت | تعداد | مجموع |
|---|---|---|---|---|---|
| 1 | آیفون ایکس خاکستری | C12345 | 12550 | 1 | 1255 |
| 2 | ساعت تیتان | A14725 | 120 | 2 | 250 |
| 3 | ایرپادهای اپل | B54213 | 210 | 1 | 210 |
جداول واکنشگرا با پسزمینه روشن
استفاده از
.table-responsive-*.table-light-*
در داخل عنصر جدول.
| شناسه | کار | ایمیل | تلفن | تخصیص | تاریخ | قیمت | وضعیت | پیشرفت |
|---|---|---|---|---|---|---|---|---|
| 1 | توسعه دهنده وب | Pixel@efo.com | 09121234567 | مهدی محمدی | 1401/01/14 | 2315.00 | درانتظار | 75% |
| 2 | توسعه دهنده وب | Pixel@efo.com | 09121234567 | مهدی محمدی | 1401/01/14 | 2315.00 | درانتظار | 45% |
| 3 | وردپرس | Pixelstrap@gmail.com | 09121234567 | سعید | 1401/05/14 | 6123.00 | Done | 100% |
جدولهای اندازهبندی شده
نمونهای از جدول بسیار بزرگ، اضافه کنید
.table-xl-*.table-lg-*.table-de-*.table-sm-*
برای ایجاد یک جدول.
| شناسه | نام کارمند | تاریخ | وضعیت | ساعات | عملکرد |
|---|---|---|---|---|---|
| 1 | محمد | 1401/06/18 | مرخصی | 0 | 29/30 |
| 2 | حسین | 1401/06/18 | حاضر | 10 | 30/30 |
| 3 | سعید | 1401/06/18 | مرخصی | 8 | 28/30 |
رنگ جدول سفارشی با هاور و ردیفهای راهراه
استفاده از کلاسtable-hover, table-striped table-*table-info,table-success,table-success,table-info,table-danger,table-primary,table-secondary,table-light,table-activeدر داخل عنصر جدول.
| شناسه | عنوان فیلم | تاریخ انتشار | استودیو | بودجه | درآمد داخلی |
|---|---|---|---|---|---|
| 1 | نام فیلم | 1390 | دیزنی | 150,000,000 | 400,953,009 |
| 2 | نام فیلم | 1390 | جهانی | 74,000,000 | 336,045,770 |
| 3 | نام فیلم | 1390 | دیزنی | 150,000,000 | 341,268,248 |
| 4 | نام فیلم | 1390 | جهانی | 175,000,000 | 486,295,561 |
| 5 | نام فیلم | 1390 | دیزنی | 200,000,000 | 415,004,880 |
حاشیه خطچین
برای حاشیه خطچین از کلاسهای.table-dashed-*, .table-dotted-*, .table-Double-*استفاده کنید. همچنین برای حاشیه نقطهچین و دوگانه کاربرد دارند.
| شناسه | نام کلاس | نوع | ساعتها | مربی | ظرفیت |
|---|---|---|---|---|---|
| 1 | چربی سوزی کاردیو | باشگاه | ۹:۰۰ صبح - ۱۱:۰۰ صبح | پانیذ | 10 |
| 2 | چربی سوزی کاردیو | باشگاه | ۹:۰۰ صبح - ۱۱:۰۰ صبح | پانیذ | 12 |
| 3 | چربی سوزی کاردیو | باشگاه | ۹:۰۰ صبح - ۱۱:۰۰ صبح | پانیذ | 13 |
| 4 | چربی سوزی کاردیو | باشگاه | ۹:۰۰ صبح - ۱۱:۰۰ صبح | پانیذ | 15 |
| 5 | چربی سوزی کاردیو | باشگاه | ۹:۰۰ صبح - ۱۱:۰۰ صبح | پانیذ | 20 |