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