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

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

در این اموزش با :

  1. کلاس های جدول
  2. کلاس های مربوط به <tr> و <th> و <td>
  3. جدول های واکنش گرا

آشنا خواهید شد.


کلاس های جدول

از کلاس های زیر می توانید برای استایل بندی کردن جدول ها استفاده کنید:

Class توضیحات
table. به هر جدول یک استایل ابتدایی را اضافه می کند( یک padding سبک  و تنها تقسیم کننده های افقی).
table-striped. خط های راه راه را به هر ردیف در داخل <tbody> اضافه می کند(در IE8 قابل دسترسی نمی باشد).
table-bordered. کادرها را به تمام اطراف و داخل جدول اضافه می کند.
table-hover. به یک منطقه از جدول، در داخل <tbody>، خاصیت hover را می دهد.
table-condensed. جدول را با نصف کردن padding خانه ها، متراکم تر می کند.
ترکیب کردن تمام کلاس های جدول

کلاس های مربوط به <tr> و <th> و <td>

از کلاس های زیر می توانید برای رنگ کردن ردیف ها و خانه های جداول استفاده کنید:

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

جدول های واکنش گرا

کلاس table-responsive. در واقع یک جدول واکنش گرا را مشخص می کند. سپس جدول می تواند در دستگاه های کوچک(زیر ۷۶۸px) به صورت افقی، اسکرول شود. در هنگام مشاهده ی جدول در هر وسیله که عرض آن بیش از ۷۶۸px باشد، هیچ تفاوتی وجود نخواهد داشت.

مثال

<div class=”table-responsive”>
<table class=”table”>

</table>
</div>

اگه به اشتراک نزاشتی حداقل لایک کن:(

نظر شما در رابطه با این آموزش چیست


بالا

تمامی حقوق مادی و معنوی این وبسایت محفوظ میباشد و متعلق است به Webtekar.ir.
Google