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

یکی از مزایای بوت استرپ فرمت بندی کامل جداول در HTML است. به سادگی اضافه کردن کلاس هایی به جدواول میتوان آنها را به شکل های مختلف فرمت بندی کرد. در این فصل با انواع این کلاس ها آشنا خواهیم شد.


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

یک جدول پایه دارای مقداری padding و جدا کننده های افقی است.


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

ساده ترین حالتی که میتوان یک جدول را فرمت دهی کرد، استفاده از کلاس table. در بوت استرپ (Bootstrap) است :

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

فرمت بندی جداول با ردیف های راه راه

کلاس table-striped. در بوت استرپ (Bootstrap) باعث میشود جدول دارای ردیف های راه راه باشد :

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

اضافه کردن کادر ها به جداول

با استفاده از کلاس table-bordered. در بوت استرپ (Bootstrap) میتوان کادر های را به جدول و سلول های درون آن اضافه کرد :

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

ردیف های hover در بوت استرپ

ردیف هایی که با قرار گرفتن نشانگر موس روی آن ردیف، رنگ پشت زمینه ی آن تغییر میکند دارای استایل hover هستند.
کلاس table-hover. در بوت استرپ (Bootstrap) این افکت را به ردیف های جدول ما اضافه میکند :

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

جدول متراکم

با استفاده از کلاس table-condensed. در بوت استرپ (Bootstrap) میتوان جدولی متراکم تر با حذف padding های سلول ها بدست آورد :

Firstname Lastname Email
John Doe john@example.com
Mary Moe mary@example.com
July Dooley july@example.com

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

از کلاس های متنی در بوت استرپ (Bootstrap) میتوان برای رنگ بندی ردیف های جدول و یا سلول های آن استفاده کرد :

Firstname Lastname Email
Default Defaultson def@somemail.com
Success Doe john@example.com
Danger Moe mary@example.com
Info Dooley july@example.com
Warning Refs bo@example.com
Active Activeson act@example.com

 

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

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

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

با استفاده از کلاس table-responsive. در بوت استرپ (Bootstrap) میتوان جدوال واکنش گرا ساخت. در این صورت جدول در دستگاه های کوچک ( کمتر از 768 پیکسل ) به صورت افقی اسکرول خواهد خورد. در هنگام نمایش در هر دستگاهی با مقداری بیش 768 پیکسل  تفاوتی در نمایش جدول وجود نخواهد داشت.

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

 

منتشر شده در ۱۰ آبان ۱۳۹۶ حمید رضا ملکی ۲۰۰۵ بازدید
دیدگاه ها

هنوز دیدگاهی ثبت نشده

برای ارسال دیدگاه لازم است ابتدا وارد سایت شوید