جدول ها در بوت استرپ

[saeed410]

در قسمت قبل روش های استایل دهی مختلف به متن ها را در بوت استرپ فراگرفتیم. در این قسمت با کلاسهای مختلف CSS برای ایجاد جداول اشنا خواهیم شد.در گذشته استفاده از جدول ها در
[h=1]طراحی سایت[/h] بسیار پر کاربرد بود. از جدول ها برای ایجاد لایه بندی صفحات استفاده میشد. اما مشکلی که جدول ها به وجود می آوردند این بود که تا زمان لود کامل جدول مرورگر توانای رندر کردن اون صفحه رو نداشت. با پیشرفته تر شدن طراحی سایت و استفاده از div ها ؛ کاربرد جداول به ایجاد لیست های قیمت و ... محدود شده است. [h=1]بوت استرپ[/h] مجموعه ایی از کلاسهای از پیش تعریف شده را برای ما ایجاد کرده است که میتوانیم به وسیله آنها جدولها را استایل دهی کنیم. همچنین بوت استرپ دارای کلاسی است که با استفاده از آن میتوان جداول را [h=1]واکنش گرا[/h] کرد. [h=2]جدول ساده در بوت استرپ :[/h] برای ایجاد یک جدول ساده در بوت استرپ کافی است از کلاس .table استفاده کنیم. مثال:

<table class="table">
<caption>جدول ساده</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
</tbody>
</table>​

تصویر دموی این کد:​

[h=2]جدول با سطرهای راه راه در بوت استرپ :[/h]

برای ایجاد جدولی که سطرهای آن یک درمیان با رنگ های متفاوت باشند میتوانید از کلاس table-striped استفاده کنید. مثال :​

<div class="container">
<table class="table table-striped">
<caption >جدول راه راه</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>​

تصویر این کد به صورت زیر است :​

[h=2]جدول حاشیه دار در بوت استرپ :[/h]

برای ایجاد جدول حاشیه دار در بوت استرپ از کلاس table-bordered استفاده میکنیم. مثال :​

<div class="container">
<table class="table table-bordered">
<caption >جدول حاشیه دار</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>​

تصویر نمونه این کد به صورت زیر است:​

[h=2]ایجاد جدول با سطر های hover در بوت استرپ :[/h]

برای ایجاد جدولی که هنگام رفتن موس روی یک سطر ، سطر مورد نظر تغییر رنگ پیدا کند از کلاس table-hover استفاده میکنیم.مثال :​

<div class="container">
<table class="table table-hover">
<caption style="text-align:right">جدول Hover</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>​

تصویر دموی این کد:​

[h=2]جدول فشرده در بوت استرپ :[/h]

با استفاده از کلاس table-condensed میتوانید جدول خود را به صورت فشرده تر ایجاد کنید. در این حالت حاشیه بین سلول ها حذف میشود. همچنین padding بین سطر نصف میشود. مثال :​

<div class="container">
<table class="table ttable-condensed">
<caption>جدول فشرده</caption>
<thead>
<tr>
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr>
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr>
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr>
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr>
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>​

​

تصویر دموی این کد به صورت زیر است:

[h=2]کلاسهای رنگ بندی پس زمینه جدول در بوت استرپ :[/h] از کلاسهای active , success, info , warning , danger میتوانید برای رنگ بندی یک سطر یا سلول استفاده کنید.مثال :

<div class="container">
<table class="table ttable-condensed">
<caption>جدول با پس زمینه های متفاوت</caption>
<thead>
<tr class="active">
<th>نام </th>
<th>شهر</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>سعید</td>
<td>مشهد</td>
</tr>
<tr class="info">
<td>سعیده</td>
<td>تهران</td>
</tr>
<tr class="warning">
<td>وحید</td>
<td>مشهد</td>
</tr>
<tr class="danger">
<td>حمید</td>
<td>اصفهان</td>
</tr>
</tbody>
</table>
</div>​

تصویر دموی این کد به صورت زیر است :​

​

[h=2]ایجاد جدول واکنش گرا در بوت استرپ :[/h]

برای ایجاد یک جدول واکنش گرا در بوت استرپ کافی است جدولی که دارای کلاس table است را داخل یک div با کلاس table-responsive قرار دهیم. در این حالت در صورتی که صفحه نمایش تغییر پیدا کند و کوچک شود جدول نیز متناسب با آن تغییر پیدا میکند. همچنین در دستگاههای بسیار کوچک سلول ها روی هم قرار میگیرند. کافیست تمام جدول خود را داخل تگ زیر قرار دهید :​

<div class="table-responsive">
کد ایجاد جدول و محتواها
</div>​

در قسمت بعد با کلاسهای استایل دهی فرم ها در بوت استرپ آشنا خواهیم شد.

​

در گروه: طراحی سایت بوت استرپ و CSS
منبع : طراحی سایت