جداول
مستندات و مثالهایی برای استایل انتخاب جداول (با توجه به استفاده رایج آنها در افزونههای جاوا اسکریپت) با Bootstrap.
با توجه به استفاده گسترده از جداول در ویجت های شخص ثالث مانند تقویم و انتخابگر تاریخ، ما جداول خود را طوری طراحی کرده ایم که انتخاب شوند . فقط کلاس پایه را .table
به هر یک اضافه کنید <table>
، سپس با استایل های سفارشی یا کلاس های اصلاح کننده مختلف اضافه کنید.
با استفاده از ابتدایی ترین نشانه گذاری جدول، در اینجا نحوه .table
ظاهر جداول مبتنی بر جدول در بوت استرپ است. همه سبکهای جدول در Bootstrap 4 به ارث رسیدهاند ، به این معنی که هر جدول تودرتو به همان شیوهای استایلبندی میشود که والد.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
همچنین میتوانید رنگها را با متن روشن روی پسزمینههای تیره معکوس کنید .table-dark
.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<table class="table table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
مشابه جداول و جداول تیره، از کلاس های اصلاح کننده استفاده کنید .thead-light
یا s .thead-dark
را <thead>
خاکستری روشن یا تیره نشان دهید.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
برای .table-striped
افزودن خط گورخر به هر ردیف جدول در داخل <tbody>
.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<table class="table table-striped table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-bordered
حاشیه ها را در همه طرف جدول و سلول ها اضافه کنید.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-bordered table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
برای جدول بدون حاشیه اضافه کنید.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-borderless
روی میزهای تاریک نیز قابل استفاده است.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-borderless table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
برای فعال کردن .table-hover
حالت شناور در ردیفهای جدول در یک <tbody>
.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-hover table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
.table-sm
با نصف کردن لایه های سلولی، میزها را فشرده تر کنید .
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری پرنده | @توییتر |
<table class="table table-sm table-dark">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
از کلاس های متنی برای رنگ آمیزی ردیف های جدول یا سلول های فردی استفاده کنید.
کلاس | سرفصل | سرفصل |
---|---|---|
فعال | سلول | سلول |
پیش فرض | سلول | سلول |
اولیه | سلول | سلول |
ثانوی | سلول | سلول |
موفقیت | سلول | سلول |
خطر | سلول | سلول |
هشدار | سلول | سلول |
اطلاعات | سلول | سلول |
سبک | سلول | سلول |
تاریک | سلول | سلول |
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
انواع پسزمینه جدول معمولی با جدول تیره موجود نیست، با این حال، میتوانید از ابزارهای متن یا پسزمینه برای دستیابی به سبکهای مشابه استفاده کنید.
# | سرفصل | سرفصل |
---|---|---|
1 | سلول | سلول |
2 | سلول | سلول |
3 | سلول | سلول |
4 | سلول | سلول |
5 | سلول | سلول |
6 | سلول | سلول |
7 | سلول | سلول |
8 | سلول | سلول |
9 | سلول | سلول |
<!-- On rows -->
<tr class="bg-primary">...</tr>
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
<tr class="bg-info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="bg-primary">...</td>
<td class="bg-success">...</td>
<td class="bg-warning">...</td>
<td class="bg-danger">...</td>
<td class="bg-info">...</td>
</tr>
انتقال معنا به فناوری های کمکی
استفاده از رنگ برای افزودن معنی فقط یک نشانه بصری ارائه می دهد که به کاربران فناوری های کمکی - مانند صفحه خوان ها - منتقل نمی شود. اطمینان حاصل کنید که اطلاعات مشخص شده با رنگ یا از خود محتوا واضح است (مثلاً متن قابل مشاهده)، یا از طریق ابزارهای جایگزین، مانند متن اضافی پنهان شده با .sr-only
کلاس، گنجانده شده است.
جدولهای واکنشگرا را با پیچاندن هر کدام .table
با .table-responsive{-sm|-md|-lg|-xl}
، ایجاد کنید، و جدول را به صورت افقی در هر max-width
نقطه شکست به ترتیب تا 576 پیکسل، 768 پیکسل، 992 پیکسل و 1120 پیکسل پیمایش کنید.
توجه داشته باشید که از آنجایی که مرورگرها در حال حاضر از پرس و جوهای زمینه محدوده پشتیبانی نمیکنند ، ما با استفاده از مقادیر با دقت بالاتر برای این مقایسهها، محدودیتها min-
و max-
پیشوندها و درگاههای دید با عرض کسری (که میتواند تحت شرایط خاصی در دستگاههای با dpi بالا رخ دهد) را دور بزنیم. .
عملکرد یک <caption>
عنوان مانند یک جدول است. این به کاربران دارای صفحهخوان کمک میکند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا میخواهند آن را بخوانند.
# | اولین | آخر | رسیدگی |
---|---|---|---|
1 | علامت گذاری | اتو | @mdo |
2 | یعقوب | تورنتون | @چربی |
3 | لری | پرنده | @توییتر |
<table class="table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="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}
.
برش عمودی / برش
جداول ریسپانسیو از استفاده overflow-y: hidden
میکنند که هر محتوایی را که فراتر از لبههای پایین یا بالای جدول است، حذف میکند. به طور خاص، این می تواند منوهای کشویی و سایر ویجت های شخص ثالث را حذف کند.
در هر نقطه شکست، .table-responsive
برای جدولهای پیمایش افقی استفاده کنید.
# | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل |
---|---|---|---|---|---|---|---|---|---|
1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<div class="table-responsive">
<table class="table">
...
</table>
</div>
در صورت نیاز برای .table-responsive{-sm|-md|-lg|-xl}
ایجاد جداول پاسخگو تا یک نقطه شکست خاص استفاده کنید. از آن نقطه شکست به بالا، جدول به طور معمول رفتار می کند و به صورت افقی حرکت نمی کند.
این جداول ممکن است شکسته به نظر برسند تا زمانی که سبکهای واکنشگرای آنها در عرضهای نمای خاص اعمال شود.
# | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل |
---|---|---|---|---|---|---|---|---|
1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<div class="table-responsive-sm">
<table class="table">
...
</table>
</div>
# | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل |
---|---|---|---|---|---|---|---|---|
1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<div class="table-responsive-md">
<table class="table">
...
</table>
</div>
# | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل |
---|---|---|---|---|---|---|---|---|
1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<div class="table-responsive-lg">
<table class="table">
...
</table>
</div>
# | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل | سرفصل |
---|---|---|---|---|---|---|---|---|
1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<div class="table-responsive-xl">
<table class="table">
...
</table>
</div>