جداول پایه
مثال اساسی
برای یک ظاهر طراحی اولیه - بالشتک های سبک و.table to any
<table>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز تاریک
همچنین می‌توانید رنگ‌ها را معکوس کنید - با متن روشن روی تاریک .table-dark.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
سر میز
از یکی از دو کلاس اصلاح کننده برای ساخت استفاده کنید<thead>s appear light or dark gray.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
ردیف های راه راه
استفاده کنید.table-striped to add zebra-striping to any table row within the <tbody>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز رنگی
همچنین می‌توانید رنگ‌ها را معکوس کنید - با متن روشن روی تاریک .table-primary.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز حاشیه رنگی
اضافه کردن.table-bordered for borders on all sides of
the table and cells.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز حاشیه دار
اضافه کردن.table-bordered for borders on all sides of
the table and cells.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز بدون حاشیه
اضافه کردن.table-borderless for a table without borders.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
ردیف های قابل شناور
اضافه کردن.table-hover to enable a hover state on table rows within a <tbody>.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
میز کوچک
اضافه کردن.table-sm to make tables more compact by cutting cell padding in half.
| # | نام کوچک | نام خانوادگی | نام کاربری |
|---|---|---|---|
| 1 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
| 4 | علامت | اتو | @mdo |
| 5 | یعقوب | تورنتون | @چربی |
کلاس های متنی
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.
| # | عنوان ستون | عنوان ستون | عنوان ستون |
|---|---|---|---|
| 1 | محتوای ستون | محتوای ستون | محتوای ستون |
| 2 | محتوای ستون | محتوای ستون | محتوای ستون |
| 3 | محتوای ستون | محتوای ستون | محتوای ستون |
| 4 | محتوای ستون | محتوای ستون | محتوای ستون |
| 5 | محتوای ستون | محتوای ستون | محتوای ستون |
زیرنویس ها
آ<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 | علامت | اتو | @mdo |
| 2 | یعقوب | تورنتون | @چربی |
| 3 | لری | پرنده | @توییتر |
جدول پاسخگو
با بسته بندی هر جداول واکنشگرا ایجاد کنید.table in .table-responsive
to make them scroll horizontally on small devices (under 768px).
| # | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول | عنوان جدول |
|---|---|---|---|---|---|---|
| 1 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 2 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
| 3 | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول | سلول جدول |
