آموزش جدول در بوت استرپ – قسمت اول

برای [B]ایجاد جدول در بوت استرپ[/B] از کلاس table در تگ table استفاده می کنیم. [B]جدول پایه در بوت استرپ[/B] به طور پیش فرض شامل خطوط افقی است و padding دارد. [B]کلاس [/B][B]table[/B]، استایل مقدماتی را به جدول اضافه می کند و [B]کلاس [/B][B]table-striped[/B] جدول را به صورت راه راه در می آورد. در کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.
[HTML]
<thead>
<tr>
<td>Class</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>.active</td>
<td>Applies the hover color to the table row or table cell</td>
</tr>
<tr>
<td>.success</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>.info</td>
<td>Indicates a neutral informative change or action</td>
</tr>
</tbody>
</table>
<br><br>
<table class="table table-striped" style="background:#b3b3ff;">
<thead>
<tr>
<td>Class</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>.active</td>
<td>Applies the hover color to the table row or table cell</td>
</tr>
<tr>
<td>.warning</td>
<td>Indicates a warning that might need attention</td>
</tr>
<tr>
<td>.danger</td>
<td>Indicates a dangerous or potentially negative action</td>
</tr>
</tbody>
</thead>
[/HTML]
همانطور که می دانید تگ tr برای ایجاد سطر و تگ td برای ایجاد ستون در جدول است. تگ thead و تگ tbody به ترتیب برای هدر جدول و بدنه ی اصلی جدول استفاده می شوند.
خروجی کد بالا به صورت زیر می باشد.
[CENTER][IMG]https://www.webyar.net/wp-content/uploads/table-bootstrap.png[/IMG]
[/CENTER]
[B][COLOR=#ff6600][B]کلاس [/B][B]table-bordered[/B][/COLOR][/B]

[B]کلاس[/B][B] table-bordered[/B] برای ایجاد کادر در اطراف و درون جدول است. به کد زیر دقت کنید.
[HTML]
<thead>
<tr>
<td>Class</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>.active</td>
<td>Applies the hover color to the table row or table cell</td>
</tr>
<tr>
<td>.success</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>.info</td>
<td>Indicates a neutral informative change or action</td>
</tr>
</tbody>
</thead>
[/HTML]

خروجی را در شکل زیر مشاهده کنید. همان طور که می بینید جدول کادر بندی شده است.
[CENTER][IMG]https://www.webyar.net/wp-content/uploads/table-bordered.png[/IMG][/CENTER]
[B][COLOR=#ff8c00][B]کلاس [/B][B]table-hover[/B][/COLOR][/B]

[B]کلاس[/B][B] table-hover [/B]به قسمت tbody جدول خاصیت hover را می دهد. یعنی روی هر سطر جدول که بروید، رنگ آن تغییر می کند. در کد زیر نحوه ی استفاده از این کلاس نشان داده شده است.
table class="table table-hover" style="background:#b3b3ff;">

[HTML]
<thead>
<tr> <td>Class</td> <td>Description</td> </tr></thead><tbody>
<tr> <td>.active</td> <td>Applies the hover color to the table row or table cell</td </tr> <tr> <td>.success</td>
<td>Indicates a successful or positive action</td>
</tr> <tr>
<td>.info</td>
<td>Indicates a neutral informative change or action</td> </tr>
</tbody>
<thead>
<tr>
<td>Class</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>.active</td>
<td>Applies the hover color to the table row or table cell</td>
</tr>
<tr>
<td>.success</td>
<td>Indicates a successful or positive action</td>
</tr>
<tr>
<td>.info</td>
<td>Indicates a neutral informative change or action</td>
</tr>
</tbody>
</thead>
[/HTML]
خروجی به صورت زیر می باشد. همانطور که در شکل مشاهده می کنید زمانی که ماوس را روی سطرهای جدول نگه می داریم، رنگ آن تغییر می کند.

[CENTER][IMG]https://www.webyar.net/wp-content/uploads/class-table-hover.png[/IMG]
[/CENTER]
در مقالات بعدی [B]آموزش جدول در بوت استرپ[/B] را با کلاس table-condensed ، رنگی کردن سطر یا یک سلول از جدول و ریسپانسیو کردن جدول ادامه خواهیم داد پس همراه ما باشید.

منبع: [URL="https://www.webyar.net"]طراحی سایت اصفهان[/URL]