سبد خرید (0)

کلاس های table در بوت استرپ

کلاس های جدول

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

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. در واقع یک جدول واکنش گرا را مشخص می کند. سپس جدول می تواند در دستگاه های کوچک(زیر 768px) به صورت افقی، اسکرول شود. در هنگام مشاهده ی جدول در هر وسیله که عرض آن بیش از 768px باشد، هیچ تفاوتی وجود نخواهد داشت.

مثال (جدول های css بوتسترپ)

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

خودتان امتحان کنید »

آموزش صوتی Bootstrap

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!