جدول پایه

Due to the widespread use of tables across third-party widgets like calendars and date pickers, we’ve designed our tables to be opt-in. Just add the base class .table to any table tag , then extend with custom styles or our various included modifier classes.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول تاریک پایه

invert the colors—with light text on dark backgrounds—with .table-dark.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

تیتر جدول روشن

Similar to tables and dark tables, use the modifier classes .thead-light to make thead appear light

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده

تیتر جدول تاریک

Similar to tables and dark tables, use the modifier classes .thead-dark to make thead appear Dark

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده

ردیف های نوار

Use .table-striped to add zebra-striping to any table rowwithin the <tbody>.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول تیره نوار

Use .table-striped to add zebra-striping to any table rowwithin the <tbody>.

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده

جدول مرزی نور

Add .table-bordered for borders on all sides of the table and cells.

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده

جدول تار مرطوب

Add .table-bordered for borders on all sides of the table and cells.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول بدون درز نور

Add .table-borderless for a table without borders.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول بدون تیره تاریکی

Add .table-borderless for a table without borders.

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده

میز قابل انعطاف نور

Add .table-hover to enable a hover state on table rows within a <tbody>.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

میز قابل هضم تاریک

Add .table-hover to enable a hover state on table rows within a <tbody>.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول کوچک نور

Add .table-sm to make tables more compact by cutting cell padding in half.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول کوچک تیره

Add .table-sm to make tables more compact by cutting cell padding in half.

# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول نور با کلاس های متنی

Use contextual classes to color table rows or individual cells.

# First Last Handle Handle 2 Handle 3 Handle 4
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
... ... ... ... ... ... ...

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

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

# First Last Handle Handle 2 Handle 3 Handle 4
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
1 Mark Otto @mdo @mdo @mdo @mdo
... ... ... ... ... ... ...

عنوان جدول روشن

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.

List of users
# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول تاریک با عنوان

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.

List of users
# نام آواتار ایمیل وضعیت اقدام
1 اسم فرضی Smith@gmail.com فعال
2 اسم فرضی Jhon@gmail.com در انتظار
3 اسم فرضی Otto@gmail.com غیر فعال

جدول ریسپانسیو روشن

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده

جدول ریسپانسیو تاریک

Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by wrapping a .table with .table-responsive. Or, pick a maximum breakpoint with which to have a responsive table up to by using .table-responsive{-sm|-md|-lg|-xl}.

# محصول تاریخ قیمت وضعیت اقدام
1 Watch 12-10-2019 $30 تحویل داده شده
2 Iphone 23-10-2019 $300 در انتظار
3 Watch 12-10-2019 $30 غیر تحویل داده شده
نتایج جستجو
هدفون 1

ابزارک

$300 400 تومان

حراج

هدفون 1

ابزارک

$300 400 تومان

جدید

هدفون 1

ابزارک

$300 400 تومان

جدید

هدفون 1

ابزارک

$300 400 تومان

جدید