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