انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
جدول پایه
جدول اصلی در بوت استرپ با استفاده از <جدول> عنصر با میز کلاس این کلاس استایلهای اولیه مانند حاشیهها، بالشتکها و افکتهای شناور را اضافه میکند تا میز تمیز و منظم به نظر برسد.
میز حاشیه دار
یک جدول حاشیهدار در Bootstrap با افزودن عبارت ایجاد میشود .حاشیه میز کلاس به الف <جدول>. این مرزها را در اطراف تمام سلول های جدول اضافه می کند و هر سطر و ستون را متمایزتر می کند.
| شناسه | محصول | قیمت | تاریخ اضافه شدن | وضعیت سهام | اقدام |
|---|---|---|---|---|---|
| 01 | هدفون بی سیم | 150 تومان | 11 بهمن 1403 | در انبار |
|
| 02 | گوشی هوشمند | 999 تومان | 24 مهر 1402 | موجود نیست |
|
| 03 | لپ تاپ | 1,200 تومان | 17 آبان 1401 | در انبار |
|
| 04 | ساعت هوشمند | 250 تومان | 25 دی 1404 | در انبار |
|
میز بی حاشیه
را میز بدون حاشیه در Bootstrap تمام حاشیه های جدول را حذف می کند و یک طراحی تمیز و مینیمال ارائه می دهد. استفاده کنید .table-borderless کلاس برای اعمال این سبک در جدول شما.
| شناسه | تصویر | محصول | قیمت | وضعیت سهام | عملکرد قیمت | اقدام |
|---|---|---|---|---|---|---|
| 01 |  |
هدفون بی سیم | 150 تومان | در انبار | 5% |
|
| 02 | |
گوشی هوشمند | 999 تومان | موجود نیست | 3% |
|
| 03 | |
لپ تاپ | 1,200 تومان | در انبار | 10% |
|
| 04 | |
ساعت هوشمند | 250 تومان | در انبار | 8% |
|
ستون راه راه میز
را میز ستونی راه راه در Bootstrap رنگ های متناوب پس زمینه را برای خوانایی بهتر به ستون های جدول اضافه می کند. استفاده کنید .جدول-راه راه-ستون کلاس برای اعمال این اثر.
| شناسه | مربی | ایمیل | تلفن | دانشجو | تخصص |
|---|---|---|---|---|---|
| 01 |
امیلی جانسون |
emily.johnson@example.com | (123) 456-7890 |
5+
|
توسعه وب |
| 02 |
مایکل اسمیت |
michael.smith@example.com | (987) 654-3210 |
3+
|
UI/UX |
| 03 |
آلیس براون |
alice.brown@example.com | (555) 123-4567 |
10+
|
پشته کامل |
| 04 |
دیوید ویلسون |
david.wilson@example.com | (444) 321-9876 |
1+
|
طراحی وب |
ردیف های راه راه
را جدول ردیف های راه راه در Bootstrap رنگ های متناوب پس زمینه را به ردیف های جدول اضافه می کند تا ظاهری تمیزتر داشته باشد. افکت را با استفاده از .رومیزی راه راه کلاس
| شناسه | نام | ایمیل | تلفن | وضعیت |
|---|---|---|---|---|
| 01 | امیلی جانسون | emily.johnson@example.com | (123) 456-7890 | فعال |
| 02 | مایکل اسمیت | michael.smith@example.com | (987) 654-3210 | در انتظار |
| 03 | آلیس براون | alice.brown@example.com | (555) 123-4567 | فعال |
| 04 | دیوید ویلسون | david.wilson@example.com | (444) 321-9876 | غیر فعال |
ردیف های قابل شناور
را جدول ردیف های قابل شناور در بوت استرپ، ردیف های جدول را در حالتی که نشانگر ماوس می شود برجسته می کند. استفاده کنید .table-hover کلاس برای اعمال این اثر.
| شناسه | اطلاعات تماس | تلفن | وضعیت |
|---|---|---|---|
| 01 |
سارا کانرsarah.connor@example.com
|
(555) 765-4321 | فعال |
| 02 |
جان دوjohn.doe@example.com
|
(123) 987-6543 | در انتظار |
| 03 |
Jane Smithjane.smith@example.com
|
(321) 654-0987 | فعال |
| 04 |
کریس ایوانزchris.evans@example.com
|
(987) 321-4567 | غیر فعال |
جدول تاریک
را جدول تاریک به عنوان مثال در بوت استرپ از .میز تاریک کلاس برای اعمال پسزمینه تیره روی جدول، و باعث میشود متن با رنگهای روشنتر برجسته شود.
| شناسه | مشتری | تاریخ | فاکتور |
|---|---|---|---|
| 05 | امیلی کارتر | 22 آذر 1400 | 1,200 تومان |
| 06 | دیوید اسمیت | 29 تیر 1400 | 2,750 تومان |
| 07 | سارا جانسون | 15 مهر 1403 | 4,000 تومان |
| 08 | مایکل براون | 17 اسفند 1404 | 5,600 تومان |
جدول اولیه
را Table Primary مثال در بوت استرپ اعمال می شود جدول-اولیه کلاس برای دادن یک پسزمینه آبی به جدول، به دنبال رنگ تم اصلی برای نمای برجسته.
| شناسه | مشتری | تاریخ | فاکتور |
|---|---|---|---|
| 05 | امیلی کارتر | 10 تیر 1404 | 1,200 تومان |
| 06 | دیوید اسمیت | 24 دی 1403 | 2,750 تومان |
| 07 | سارا جانسون | 21 بهمن 1401 | 4,000 تومان |
| 08 | مایکل براون | 3 دی 1402 | 5,600 تومان |
جدول فعال
را جدول فعال به عنوان مثال در بوت استرپ با استفاده از حالت فعال به یک ردیف یا سلول خاص اضافه می کند .جدول فعال کلاس این سطر یا سلول انتخاب شده با پس زمینه خاکستری را برجسته می کند.
| شناسه | مشتری | تاریخ | فاکتور |
|---|---|---|---|
| 09 | آلیس گرین | 21 تیر 1404 | 1,500 تومان |
| 10 | جان دو | 1 دی 1401 | 3,200 تومان |
| 11 | لیندا وایت | 22 تیر 1401 | 2,800 تومان |
| 12 | رابرت بلک | 3 آبان 1404 | 4,400 تومان |
میز کوچک
را میز کوچک به عنوان مثال در بوت استرپ از .table-sm کلاس برای ایجاد یک جدول فشرده. این باعث کاهش بالشتک می شود و جدول را متراکم تر می کند که برای نمایش داده ها در فضای کوچکتر ایده آل است.
| شناسه | مشتری | تاریخ | فاکتور |
|---|---|---|---|
| 1 | مایکل براون | 6 شهریور 1401 | 2,000 تومان |
| 2 | سارا جانسون | 10 مرداد 1401 | 1,750 تومان |
| 3 | دیوید لی | 31 فروردین 1401 | 3,100 تومان |
| 4 | Emily Davis | 13 خرداد 1404 | 4,500 تومان |
| 5 | کریس مارتین | 16 دی 1403 | 2,300 تومان |
| 6 | امی ویلسون | 11 بهمن 1404 | 3,600 تومان |
تراز عمودی
را تراز عمودی مثال در بوت استرپ نحوه تراز کردن محتوای سلول های جدول را به صورت عمودی نشان می دهد. می توانید از کلاس هایی مانند .align-top, .تراز-وسط، و .align-bottom قرار دادن محتوا در بالا، وسط یا پایین سلول، افزایش خوانایی و سازماندهی جدول.
| سرفصل 1 | سرفصل 2 | سرفصل 3 | سرفصل 4 |
|---|---|---|---|
این سلول ارث می برد vertical-align: وسط; از روی میز |
این سلول ارث می برد vertical-align: وسط; از روی میز |
این سلول ارث می برد vertical-align: وسط; از روی میز |
این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند. |
این سلول ارث می برد vertical-align: bottom; از ردیف جدول |
این سلول ارث می برد vertical-align: bottom; از ردیف جدول |
این سلول ارث می برد vertical-align: bottom; از ردیف جدول |
این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند. |
این سلول ارث می برد vertical-align: وسط; از روی میز |
این سلول ارث می برد vertical-align: وسط; از روی میز |
این سلول به سمت بالا تراز شده است. | این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند. |
میز تو در تو
را میز تو در تو مثال در بوت استرپ نشان می دهد که چگونه می توان یک جدول در یک جدول دیگر ایجاد کرد. این به شما اجازه می دهد تا داده های پیچیده را به صورت سلسله مراتبی سازماندهی کنید. میتوانید از همان کلاسهای جدول Bootstrap برای استایل دادن به جدول تودرتو استفاده کنید و از ظاهری ثابت و در عین حال ارائه اطلاعات دقیق به طور مؤثر اطمینان حاصل کنید.
| مورد | توضیحات | ||||||
|---|---|---|---|---|---|---|---|
| مورد 1 |
|
||||||
| مورد 2 |
|
آناتومی جدول
را آناتومی جدول مثال در بوت استرپ ساختار اصلی یک جدول را نشان می دهد. این شامل عناصر ضروری مانند هدر جدول است <thead>، بدن <tbody>، و پاورقی <tfoot>، نحوه سازماندهی داده ها را در قالبی واضح و خوانا نشان می دهد.
| # | نام | نقش | دسته | بیوگرافی |
|---|---|---|---|---|
| 1 | مارک اتو | توسعه دهنده | @mdo | علاقه مند به کدنویسی و مشارکت های منبع باز. از پیاده روی در اوقات فراغت خود لذت می برد. |
| 2 | جیکوب تورنتون | طراح | @چربی | طراح گرافیک خلاق با تمرکز بر تجربه کاربر. عاشق قهوه و هنر است. |
| 3 | لری برد | جامعه Manager | تعامل با جامعه برای ایجاد ارتباطات معنادار. خواننده و پرنده نگر مشتاق. | |
| به انجمن ما بپیوندید و با این افراد شگفت انگیز ارتباط برقرار کنید! | ||||