جلسه ۰۴ : کار با جداول در Bootstrap 3

ردیف های راه راه در جدول

از کلاس .table-striped ، نیز برای ایجاد ردیف های راه راه در جداول ، استفاده می شود.

مثال:

ردیف های راه راه در جدول – کار با جداول در Bootstrap 3

جداول خط دار (bordered)

از کلاس .table-bordered ، برای خط دار کردن مرز بین سطر و ستون ها در جداول استفاده می شود.

مثال:

جداول خط دار (bordered) – کار با جداول در Bootstrap 3

سطر های خط دار

برای اینکه فقط مرز سطر ها ، در جداول خط دار باشد از کلاس .table-hover ، در جداول استفاده می کنیم.

مثال:

سطر های خط دار – کار با جداول در Bootstrap 3

 

 جداول فشرده

از کلاس .table-condensed برای فشرده کردن padding ( فضای داخلی) جداول استفاده می شود.

جداول فشرده – کار با Tableدر Bootstrap 3

Contextual classes(کلاسهای متنی)

از کلاسهای متنی می توانید برای رنگ آمیزی سطر  (<tr>) یا سلول(<td>) های جداول استفاده کنید.

 

Contextual classes(کلاسهای متنی) – کار با Tableدر Bootstrap 3

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

کلاسهای متنی – کار با Tableدر Bootstrap 3

ایجاد جداول Responsive

کلاس .table-responsive برای ایجاد جداولی با قابلیت Responsive مورد استفاده قرار می گیرد.که باعث فعال شدن قابلیت scroll افقی جدول در صفحه نمایش هایی با عرض کمتر از ۷۶۸px می شود:

کلام آخر

از آنجایی که جداول در درج اطلاعات طبقه بندی شده و جدولی در محتوای وب سایت ها نقش بسیار مهمی دارند. در آموزش مباحث کار با جداول در Bootstrap 3 شما را با چگونگی استفاده از کلاسهای آماده برای کار با Tableدر Bootstrap 3 ، آشنا کردیم. امیدواریم که مباحث فوق، مورد توجه و استفاده ی شما قرار گرفته باشد.