جداول دربوت استرپ – (بررسی کامل جداول بوت استرپ)

در این جلسه از دوره آموزش بوت استرپ به جداول در بوت استرپ می پردازیم.

کارباجداول در بوت استرپ :

جدول در بوت استرپ : همانطور که می دانید در html ما به وسیله تگ <table>و تگ هایی که درون این تگ قرار می گرفتند یک جدول را به صفحه وب اضافه می کردیم و با Css می توانستیم ظاهر آن را تنظیم کنیم.در فریم ورک بوت استرپ برای اضافه کردن جدول و تنظیم ظاهرجداول به طور پیش فرض کلاس هایی تعریف شده است که شما می توانید بااعمال این کلاس ها به جدول آنها را خیلی زیبا ایجاد کنید. در این جلسه به بررسی این کلاس ها می پردازیم.

کلاس TABLE :

جداول بوت استرپی را با اضافه کردن کلاس tabla به تگ table می توان ایجاد کرد.

<table class=”table”>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>

کلاس TABLE-STRIPED (جداول در بوت استرپ):

به وسیله این کلاس می توان رنگ پس زمینه سطرهای جداول را یکی در میان به رنگ پیش فرض تعریف شده در بوت استرپ (خاکستری کمرنگ ) تغییرداد.

این کلاس جدولی با ساختاری شبیه پوست گوره خر ایجاد می کند. به نحوه اضافه کردن این کلاس دقت کنید.

<table class="table table-striped">

بعداز کلاس table یک فاصله می گذاریم و بعدtable – striped را اضافه می کنیم.

کلاس TABLE-BORDERD :

این کلاس یک border پیش فرض در چهار طرف سطرها و ستون های جداول در بوت استرپ ایجاد می کند.

<table class="table table-bordered">

کلاس TABLE – HOVER :

این کلاس باعث می شود وقتی روی جدول هاور می کنیم(بردن موس روی سطرها و ستون ها) رنگ پس زمینه به رنگ پیش فرض در بوت استرپ تغییر کند.

<table class="table table-hover">

به سطری که موس روی آن برده می شود دقت کنید.رنگ آن تغییر کرده است.

کلاس CONDENSED TABLE :

این کلاس با عث می شود که جداول در بوت استرپ متراکم شوند.

جداول در بوت استرپ با pading از پیش تعریف شده نمایش داده می شوند و وقتی این کلاس را به جداول بوت استرپ اعمال می کنیم با نصف کردن pading جداول , آنها را متراکم تر نمایش می دهند.به تصویر زیر دقت کنید.

<table class="table table-condensed">

کلاس های متنی :(CONTEXTUAL CLASSES):

این کلاس ها در بوت استرپ با اعمال رنگ به پس زمینه tr یا td روی یک رویداد خاص تاکید می کنند.

• کلاس active : اعمال رنگ برروی ردیف یا سلول جدول زمانی که کاربر رویداد hover را انجام می دهد.
• کلاس success : این کلاس یک عمل مثبت یا موفقیت آمیز را مشخص می کند.
• کلاس info :اطلاعاتی که جنبه آموزشی دارندرا مشخص می کند.
• کلاس warning : اطلاعاتی که نیاز به توجه بیشتر دارند را به صورت اخطار برای کاربر مشخص می کند.
• کلاس danger : عملی که انجام آن خطر ناک است و تاثیر منفی دارد را برای کاربر مشخص می کند.

کلاس TABLE – RESPONSIVE :

همانطور که از نام این کلاس مشخص است جداول در بوت استرپ را واکنشگرا می کند.

این کار با این کلاس به این نحو صورت می گیرد که در رزولوشن های کوچکتر از ۷۶۸ پیکسل یک اسکرول افقی به جدول می دهد.

این اسکرول از به هم ریختگی جداول جلوگیری می کند.به تصویر زیر که در رزولوشن ۴۱۱*۴۳۰گرفته شده است دقت کنید.

<div class="table-responsive">
<table class="table">
...
</table>
</div>