مستندات و مثالهایی برای استایل انتخاب جداول (با توجه به استفاده رایج آنها در افزونههای جاوا اسکریپت) با Bootstrap.
در این صفحه
بررسی اجمالی
به دلیل استفاده گسترده از <table>عناصر در ویجت های شخص ثالث مانند تقویم ها و انتخابگرهای تاریخ، جداول Bootstrap مجاز هستند . کلاس پایه را .tableبه هر یک اضافه کنید <table>، سپس با کلاس های اصلاح کننده اختیاری یا سبک های سفارشی ما گسترش دهید. همه سبکهای جدول در Bootstrap به ارث برده نمیشوند، به این معنی که هر جدول تودرتو را میتوان مستقل از والد استایلبندی کرد.
با استفاده از ابتدایی ترین نشانه گذاری جدول، در اینجا نحوه .tableظاهر جداول مبتنی بر جدول در بوت استرپ است.
#
اولین
آخر
رسیدگی
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری پرنده
@توییتر
<tableclass="table"><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><tdcolspan="2">Larry the Bird</td><td>@twitter</td></tr></tbody></table>
انواع
از کلاس های متنی برای رنگ آمیزی جداول، ردیف های جدول یا سلول های فردی استفاده کنید.
کلاس
سرفصل
سرفصل
پیش فرض
سلول
سلول
اولیه
سلول
سلول
ثانوی
سلول
سلول
موفقیت
سلول
سلول
خطر
سلول
سلول
هشدار
سلول
سلول
اطلاعات
سلول
سلول
سبک
سلول
سلول
تاریک
سلول
سلول
<!-- On tables --><tableclass="table-primary">...</table><tableclass="table-secondary">...</table><tableclass="table-success">...</table><tableclass="table-danger">...</table><tableclass="table-warning">...</table><tableclass="table-info">...</table><tableclass="table-light">...</table><tableclass="table-dark">...</table><!-- On rows --><trclass="table-primary">...</tr><trclass="table-secondary">...</tr><trclass="table-success">...</tr><trclass="table-danger">...</tr><trclass="table-warning">...</tr><trclass="table-info">...</tr><trclass="table-light">...</tr><trclass="table-dark">...</tr><!-- On cells (`td` or `th`) --><tr><tdclass="table-primary">...</td><tdclass="table-secondary">...</td><tdclass="table-success">...</td><tdclass="table-danger">...</td><tdclass="table-warning">...</td><tdclass="table-info">...</td><tdclass="table-light">...</td><tdclass="table-dark">...</td></tr>
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .visually-hiddenکلاس، گنجانده شده است.
جداول تاکیدی
ردیف های راه راه
برای .table-stripedافزودن خط گورخر به هر ردیف جدول در داخل <tbody>.
#
اولین
آخر
رسیدگی
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری پرنده
@توییتر
<tableclass="table table-striped">
...
</table>
این کلاس ها را می توان به انواع جدول نیز اضافه کرد:
با تنظیم پسزمینه سلول جدول با --bs-table-bgویژگی سفارشی شروع میکنیم. سپس همه انواع جدول، آن ویژگی سفارشی را برای رنگ آمیزی سلول های جدول تنظیم می کنند. به این ترتیب اگر از رنگ های نیمه شفاف به عنوان پس زمینه میز استفاده شود، دچار مشکل نمی شویم.
سپس یک سایه باکس داخلی روی سلولهای جدول اضافه box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);میکنیم background-color. از آنجا که ما از یک پخش بزرگ و بدون تاری استفاده می کنیم، رنگ یکنواخت خواهد بود. از آنجایی که --bs-table-accent-bgبه طور پیشفرض تنظیم نشده است، سایه جعبه پیشفرض نداریم.
هنگامی که یکی .table-striped، .table-hoverیا .table-activeکلاس ها اضافه می شوند، --bs-table-accent-bgبرای رنگ آمیزی پس زمینه، روی یک رنگ نیمه شفاف تنظیم می شود.
برای هر نوع جدول، --bs-table-accent-bgبسته به آن رنگ، رنگی با بالاترین کنتراست تولید می کنیم. به عنوان مثال، رنگ تاکیدی برای .table-primaryتیره تر است در حالی که .table-darkدارای رنگ تاکیدی روشن تر است.
رنگ های متن و حاشیه به همین ترتیب تولید می شوند و رنگ های آنها به طور پیش فرض به ارث می رسد.
سلول های جدول <thead>همیشه به صورت عمودی به سمت پایین تراز می شوند. سلول های جدول در تراز خود را از و به طور پیش فرض در بالا تراز به <tbody>ارث می برند . <table>از کلاس های تراز عمودی برای تراز مجدد در صورت نیاز استفاده کنید.
سرفصل 1
سرفصل 2
سرفصل 3
سرفصل 4
این سلول vertical-align: middle;از جدول ارث می برد
این سلول vertical-align: middle;از جدول ارث می برد
این سلول vertical-align: middle;از جدول ارث می برد
این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند.
این سلول vertical-align: bottom;از ردیف جدول ارث می برد
این سلول vertical-align: bottom;از ردیف جدول ارث می برد
این سلول vertical-align: bottom;از ردیف جدول ارث می برد
این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند.
این سلول vertical-align: middle;از جدول ارث می برد
این سلول vertical-align: middle;از جدول ارث می برد
این سلول به سمت بالا تراز شده است.
این در اینجا متنی است که در نظر گرفته شده تا فضای عمودی زیادی را اشغال کند تا نشان دهد که تراز عمودی در سلول های قبلی چگونه کار می کند.
<divclass="table-responsive"><tableclass="table align-middle"><thead><tr>
...
</tr></thead><tbody><tr>
...
</tr><trclass="align-bottom">
...
</tr><tr><td>...</td><td>...</td><tdclass="align-top">This cell is aligned to the top.</td><td>...</td></tr></tbody></table></div>
لانه سازی
سبکهای حاشیه، سبکهای فعال و انواع جدول توسط جداول تودرتو به ارث نمیرسند.
برای جلوگیری از نشت هر> سبکی به جداول تودرتو، از انتخابگر ترکیب کننده فرزند ( ) در CSS خود استفاده می کنیم. از آنجایی که ما باید تمام tds و ths را در thead, tbodyو و tfootهدف قرار دهیم، انتخابگر ما بدون آن بسیار طولانی به نظر می رسد. به این ترتیب، ما از انتخابگر نسبتاً عجیب و غریب .table > :not(caption) > * > *برای هدف قرار دادن تمام tds و ths های جدول استفاده می کنیم .table، اما هیچ کدام از جدول های تودرتو بالقوه.
توجه داشته باشید که اگر <tr>s را بهعنوان فرزندان مستقیم جدول اضافه کنید، آنها <tr>به طور پیشفرض در یک <tbody>قرار میگیرند، بنابراین انتخابگرهای ما همانطور که در نظر گرفته شده است کار میکنند.
آناتومی
سر میز
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید .table-lightیا s .table-darkرا <thead>خاکستری روشن یا تیره نشان دهید.
<caption>عملکردی مانند عنوان یک جدول است . این به کاربران دارای صفحهخوان کمک میکند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا میخواهند آن را بخوانند.
لیست کاربران
#
اولین
آخر
رسیدگی
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری پرنده
@توییتر
<tableclass="table table-sm"><caption>List of users</caption><thead>
...
</thead><tbody>
...
</tbody></table>
شما همچنین می توانید <caption>در بالای جدول با .caption-top.
لیست کاربران
#
اولین
آخر
رسیدگی
1
علامت گذاری
اتو
@mdo
2
یعقوب
تورنتون
@چربی
3
لری
پرنده
@توییتر
<tableclass="table caption-top"><caption>List of users</caption><thead><tr><thscope="col">#</th><thscope="col">First</th><thscope="col">Last</th><thscope="col">Handle</th></tr></thead><tbody><tr><thscope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr><tr><thscope="row">2</th><td>Jacob</td><td>Thornton</td><td>@fat</td></tr><tr><thscope="row">3</th><td>Larry</td><td>the Bird</td><td>@twitter</td></tr></tbody></table>
جداول پاسخگو
جداول ریسپانسیو اجازه می دهد تا جداول به راحتی به صورت افقی پیمایش شوند. با قرار دادن یک علامت .tableبا .table-responsive. یا با استفاده از یک حداکثر نقطه شکست برای داشتن یک جدول پاسخگو انتخاب کنید .table-responsive{-sm|-md|-lg|-xl|-xxl}.
برش عمودی / برش
جداول ریسپانسیو از استفاده overflow-y: hiddenمیکنند که هر محتوایی را که فراتر از لبههای پایین یا بالای جدول است، حذف میکند. به طور خاص، این می تواند منوهای کشویی و سایر ویجت های شخص ثالث را حذف کند.
همیشه پاسخگو
در هر نقطه شکست، .table-responsiveبرای جدولهای پیمایش افقی استفاده کنید.
در صورت نیاز برای .table-responsive{-sm|-md|-lg|-xl|-xxl}ایجاد جداول پاسخگو تا یک نقطه شکست خاص استفاده کنید. از آن نقطه شکست به بالا، جدول به طور معمول رفتار می کند و به صورت افقی حرکت نمی کند.
این جداول ممکن است شکسته به نظر برسند تا زمانی که سبکهای واکنشگرای آنها در عرضهای نمای خاص اعمال شود.