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

آموزش بوت استرپ ، استفاده از جدول

آموزش بوت استرپ ، استفاده از جدول

در فریم ورک بوت استرپ می توانید جداولی با طرح سبک و تمیز و البته خیلی سریع ایجاد کنید. این جداول با padding ملایم وسطرهایی افقی فراهم شده اند. بعضی از تگ های اصلی که برای ساخت جدول توسط بوت استرپ پشتیبانی می شود عبارتند از :

از قبل با تگ های بالا آشنایی لازم را دارید فقط توجه داشته باشید که <caption> حامل توضیحاتی درباره جدول می باشد. برای ساخت یک جدول ساده با طرحی زییا به صورت basic کافی است به تگ <table> کلاس ".table" را اضافه کنید.

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

ویژگی های اختیاری برای جداول در Bootstrap :

در کنار جدول اصلی که با کلاس table ایجاد می شود، ویژگی های اختیاری دیگری نیز برای جدوال در بوت استرپ فراهم شده که این ویژگی ها هر یک با کلاس خاصی مشخص شده اند. در ادامه به توضیح این ویژگی ها می پردازیم.

جدول راه راه یا Striped Table :

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

جدول حاشیه بندی شده یا Bordered Table :

با اضافه کردن کلاس table-bordered به جدول ، کلیه خانه های جدول چه به صورت افقی و چه به صورت عمودی حاشیه بندی یا کادربندی خواهند شد.

جدول با حالت شناور یا Hover Table :

با اضافه کردن کلاس table-hover به جدول، هنگامی که نشانه گر موس به روی جدول و سطرها قرارداده شود یا Hover شود، سطری که موس بر روی آن قرار دارد به رنگ خاکستری تغییر رنگ می دهد :

 

جدول متراکم شده یا Condensed Table :

با اضافه کردم کلاس table-condensed به جدول، padding جدول مورد نظر به نصف کاهش پیدا می کند تا جدول متراکم شود.

کلاس های مرتبط با متن یا Contextual classes :

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

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

  • active برای اعمال رویداد hover برای سطر یا ستون مورد نظر
  • success برای نمایش عملی موفقیت آمیز برای سطر یا ستون مورد نظر
  • info جهت نمایش سطر یا ستون حاوی اطلاعات
  • warning نمایش سطر یا ستون مورد نظر در حالت اخطار
  • danger سطر یا ستون مورد نظر در حاوی متن خطر یا منفی

جدول واکنشگرا یا Responsive Tables :

با قرار دادن جدول با کلاس table داخل عنصری مانند div با کلاس table-responsive جدول مورد نظر در نمایشگرهای کوچک با عرض کمتر از ۷۶۸ پیکسل به صورت اسکرول دار نمایش داده می شود.

 

تاریخ آخرین بروزرسانی : ۵ آبان ۱۳۹۶
منبع :‌ مردان وردپرس
سجاد رحمانی نژاد

کارشناس طراحی UI وب ، بیش از سه سال سابقه طراحی و کار اجرایی در سازمان های مختلف و به صورت مستقل ( Freelance ) همچنین مدرس دوره های طراحی وب در آموزشگاه های تهران و کرج.

Advertising MiSaCo.

نظرات خود را اینجا بنویسید

آدرس الکترونیکی شما نمایش داده نمی شود *

Time limit is exhausted. Please reload CAPTCHA.