عناصر جدول توضیح هدر در این قسمت قرار دارد...
جدول پایه
با استفاده از ابتدایی ترین نشانه گذاری جدول، در اینجا نحوه ظاهر جداول مبتنی بر جدول در بوتسترپ
آمده است. همچنین میتوانید رنگها را با متن روشن در پسزمینههای تیره معکوس کنید
.table-dark
.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری | پرنده |
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری | پرنده |
<!-- default table -->
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">اول</th>
<th scope="col">آخر</th>
<th scope="col">هندل</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>مارک</td>
<td>اوتو</td>
<td>@mdo</td>
</tr>
...
</tbody>
</table>
<!-- dark table -->
<table class="table table-dark">
...
</table>
ویژگی هد جدول
شبیه به جداول و جداول تاریک، از کلاس های اصلاح کننده استفاده کنید.thead-light
یا
.thead-dark
ساختن <thead>
روشن یا خاکستری تیره ظاهر می شود.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری | پرنده |
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری | پرنده |
<!-- thead-light -->
<table class="table">
<thead class="table-light">...</thead>
</table>
<!-- thead-dark -->
<table class="table">
<thead class="table-dark">...</thead>
</table>
ردیف راه راه
استفاده کنید .table-striped
برای اضافه کردن راه راه به هر ردیف جدول در
<tbody>
.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری | پرنده |
<!-- table-striped -->
<table class="table table-striped">
...
</table>
جدول خط دار
اضافه کردن .table-bordered
برای مرزها در هر طرف میز و سلول ها.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری پرنده |
<!-- table-bordered -->
<table class="table table-bordered">
...
</table>
جدول بدون خط
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری پرنده |
<!-- table-borderless -->
<table class="table table-borderless">
...
</table>
جدول قابل هاور
اضافه کردن .table-hover
برای فعال کردن یک هاور بر روی ردیف های جدول در
یک<tbody>
.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری پرنده |
<!-- table-hover -->
<table class="table table-hover">
...
</table>
جدول کوچک
اضافه کردن .table-sm
برای ساخت جداول با برش سلولی به نصف کاهش می یابد.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری پرنده |
<!-- table-sm -->
<table class="table table-sm">
...
</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>
</tr>
<!-- 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>
</tr>
کپشن
یک <caption>
مانند یک عنوان برای یک جدول عمل می کند. این به کاربران دارای
صفحهخوان کمک میکند تا جدولی را پیدا کنند و بفهمند درباره چیست و تصمیم بگیرند که آیا میخواهند آن
را بخوانند یا خیر.
# | اول | آخر | هندل |
---|---|---|---|
1 | مارک | اوتو | @mdo |
2 | جیکوب | ترون | @fat |
3 | لری | پرنده |
<!-- caption -->
<table class="table">
<caption>List of users</caption>
<thead>...</thead>
<tbody>...</tbody>
</table>
جدول رسپانسیو
جداول ریسپانسیو اجازه می دهد تا جداول به راحتی به صورت افقی پیمایش شوند. با قرار دادن ، هر جدولی را
در تمام نمایپورت ها پاسخگو کنید .table
با .table-responsive
. یا، حداکثر
نقطه شکست را انتخاب کنید تا با استفاده از آن جدولی پاسخگو داشته باشید
.table-responsive{-sm|-md|-lg|-xl}
.
# | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ | هدینگ |
---|---|---|---|---|---|---|---|---|---|
1 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
2 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
3 | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول | سلول |
<!-- table-responsive -->
< class="table-responsive">
<table class="table">
...
</table>
</div>