جدول ها (Tables)
اینجا «جدول بوت استرپ» را خیلی ساده می فهمی. «کلاس (Class)» یعنی برچسب آماده استایل. با چند کلاس، جدول ها مرتب، خوانا، و ریسپانسیو می شوند.
جدول پایه با .table
کلاس .table فاصله ملایم و خط های افقی می دهد. این پایه است.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Ali</td>
<td>ali@example.com</td>
</tr>
</tbody>
</table>
راه راه با .table-striped
کلاس .table-striped ردیف ها را زیگزاگ می کند. خوانایی بهتر می شود.
<table class="table table-striped">
<tbody>
<tr>
<td>A</td>
<td>One</td>
</tr>
<tr>
<td>B</td>
<td>Two</td>
</tr>
</tbody>
</table>
کادر کامل با .table-bordered
کلاس .table-bordered برای خط دور جدول و سلول هاست.
<table class="table table-bordered">
<tbody>
<tr>
<td>Cell</td>
<td>Cell</td>
</tr>
</tbody>
</table>
هاور با .table-hover
کلاس .table-hover روی ردیف ها افکت هاور می گذارد.
<table class="table table-hover">
<tbody>
<tr>
<td>Move</td>
<td>Mouse</td>
</tr>
</tbody>
</table>
حالت تیره با .table-dark
کلاس .table-dark پس زمینه تیره می دهد. متن باید روشن باشد.
<table class="table table-dark">
<tbody>
<tr>
<td>Dark</td>
<td>Mode</td>
</tr>
</tbody>
</table>
تیرهِ راه راه
ترکیب .table-dark و .table-striped جدول تیره راه راه می سازد.
<table class="table table-dark table-striped">
<tbody>
<tr>
<td>Row</td>
<td>One</td>
</tr>
</tbody>
</table>
تیرهِ هاور
روی حالت تیره، افکت هاور هم می خواهی؟ ترکیبش ساده است.
<table class="table table-dark table-hover">
<tbody>
<tr>
<td>Hover</td>
<td>Dark</td>
</tr>
</tbody>
</table>
بدون کادر با .table-borderless
کلاس .table-borderless خط های جدول را حذف می کند.
<table class="table table-borderless">
<tbody>
<tr>
<td>No</td>
<td>Borders</td>
</tr>
</tbody>
</table>
رنگ های متنی جدول (Contextual)
کلاس های .table-* مثل primary و danger، ردیف یا سلول را رنگی می کنند.
<table class="table">
<tbody>
<tr>
<td>Default</td>
<td>Row</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Row</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Row</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Row</td>
</tr>
</tbody>
</table>
رنگ فقط برای هدر جدول
می توانی فقط سرستون را رنگی کنی؛ بدنه ساده می ماند.
<table class="table">
<thead class="table-dark">
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sara</td>
<td>sara@example.com</td>
</tr>
</tbody>
</table>
جمع وجور با .table-sm
کلاس .table-sm پدینگ سلول ها را نصف می کند. جدول کوچک تر می شود.
<table class="table table-sm">
<tbody>
<tr>
<td>Small</td>
<td>Padding</td>
</tr>
</tbody>
</table>
جدول ریسپانسیو با .table-responsive
کلاس .table-responsive وقتی جدول عریض باشد، اسکرول افقی می دهد.
<div class="table-responsive">
<table class="table">
<tbody>
<tr>
<td>Wide</td>
<td>Content</td>
</tr>
</tbody>
</table>
</div>
نسخه شرطی ریسپانسیو
می توانی تعیین کنی از چه عرضی اسکرول فعال شود؛ مثلا -sm.
<div class="table-responsive-sm">
<table class="table">
<tbody>
<tr>
<td>Small</td>
<td>Breakpoint</td>
</tr>
</tbody>
</table>
</div>
گام های عملی ساخت جدول بوت استرپ
- کلاس پایه
.tableرا اضافه کن. - برای خوانایی،
.table-stripedیا.table-hoverبزن. - اگر عریض شد،
.table-responsiveدورش بگذار.
نکته: برای رنگ ها به رنگ ها برو. همچنین بخش رنگ های پس زمینه به انتخاب بهتر کمک می کند.
جمع بندی سریع
.tableپایه همه جدول هاست..table-stripedو.table-hoverخوانایی را بالا می برند..table-*برای تأکید و هشدار مناسب است..table-responsiveاسکرول افقی هوشمند می دهد.