شروع پرقدرت آموزش HTML و CSS [ ورود به دنیای هیجان انگیز وب! ]

30% تخفیف برای مدت محدود!

طراحی و ایجاد جداول در bootstrap 4


نویسنده:
جمعه ۲ آبان ۱۳۹۹
طراحی جداول در bootstrap 4

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

جدول ساده

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

کلاس .table یک ظاهر طراحی اولیه را به یک جدول اضافه می کند برای درک این موضوع به مثال زیر توجه کنید :

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

پیشنهاد میشود سایر قسمت های دوره ی بوت استرپ را مطالعه فرمایید.

اگر بخواهیم ردیف های جدول را به شکل جداول اداری یکی در میان خط کشی کنیم باید کلاس table-striped. را به آن اضافه کنیم:

حاشیه برای جدول ها

برای اضافه کردن حاشیه می توانید از کلاس table-bordered. استفاده کنید:

قابلیت hover در ردیف ها

حتما تا به حال دیده اید که برخی از جداول قابلیت خاصی دارند؛ اگر موس را روی آن ها ببرید، ردیف مربوطه شان پررنگ تر شده یا به طور کل تغییر می کند تا خواننده بتواند اطلاعات را واضح تر ببیند. برای ایجاد چنین قابلیت باید کلاس table-hover. را به جدول خود اضافه کنید:

جداول تیره (night mode)

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

ترکیب کلاس ها

همانطور که میدانید در زبان HTML اجازه ی استفاده از چندین کلاس برای یک عنصر را دارید. بنابراین می توانیم کلاس های بوت استرپ را نیز ترکیب کنیم. به طور مثال اگر بخواهیم جدولی تیره (حالت شب) داشته باشیم و همچنین ردیف هایش را یکی در میان تیره و روشن کنیم (حالت جداول اداری) می توانیم کلاس های table-striped. و table-dark. را ترکیب کنیم:

همچنین با استفاده از کلاس table-hover. می توانیم افکت hover را روی جدول های تیره ی خود نیز پیاده کنیم:

کلاس های زمینه ای

در بخش از آموزش طراحی جداول در bootstrap 4 ، با کلاس‌های زمینه‌ای آشنا خواهیم شد. این نوع کلاس‌ها زمینه‌ی هر ردیف را تعیین می‌کنند. به طور مثال فلان ردیف چقدر مهم است؟ آیا ردیفی از جدول در bootstrap در حال اخطار دادن به کاربر است؟ و هر نوع اطلاعات دیگری که ردیف های جدول را معنا دار کند معمولا در این قسمت قرار می گیرد. این اهمیت ها معمولا با رنگ اعمال می شوند:

  • .table-primary: ایجاد رنگ آبی: نشان دهنده ی عمل مهم
  • .table-success: ایجاد رنگ سبز: نشان دهنده ی عمل موفقیت آمیز یا مثبت
  • .table-danger: ایجاد رنگ قرمز: نشان دهنده ی عمل خطرناک یا منفی
  • .table-info:‌ ایجاد رنگ آبی روشن: نشان دهنده ی تغییر یا عملی خنثی (نه مثبت و نه منفی)
  • .table-warning: ایجاد رنگ نارنجی: نشان دهنده ی هشداری که بهتر است به آن رسیدگی شود
  • .table-active:‌ایجاد رنگ خاکستری: رنگ افکت hover را به آن ردیف اضافه می کند
  • .table-secondary : ایجاد رنگ خاکستری: نشان دهنده ی عملی که کم اهمیت تر است
  • .table-light: ایجاد رنگ خاکستری روشن برای کل جدول یا ردیف های آن
  • .table-dark: ایجاد رنگ خاکستری تیره برای کل جدول یا ردیف های آن

دیدگاهتان را بنویسید

یک پاسخ به “طراحی و ایجاد جداول در bootstrap 4”

  1. مهران گفت:

    با سلام وقتتون بخیر
    شما از چه سیستمی برای فروش محصولاتتون استفاده می کنید؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *