سه شنبه , آذر ۲۱ ۱۴۰۲

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

در این مقاله از وب سایت Aspcore.ir در مورد ایجاد جدول Responsive در بوت استرپ صحبت خواهیم کرد. همچنین مطابق قاعده و روال خود یک فیلم آموزشی نیز به صورت یک پروژه کوچک در این رابطه تهیه کرده ایم که در ادامه مقاله می توانید مشاهده بفرمایید.

 

طراحی ریسپانسیو چیست ؟

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

 

استفاده از بوت استرپ

برای ریسپانسیو کردن یک وب سایت فریم ورک های زیادی وجود دارد. اما یکی از شناخته شده ترین این فریم ورک ها که مطمئنا در مورد آن شنیده اید بوت استرپ می باشد. در این آموزش با استفاده از فریم ورک BootStrap یک جدول را به صورت ریسپانسیو طراحی خواهیم کرد.

 

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

به تصاویر زیر نگاه کنید :

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

 

در تصویر بالا یک جدول در مرکز صفحه قرار دارد اما همانطور که مشاهده می کنید حالت ریسپانسیو و منظمی ندارد. اما در تصویر زیر همین جدول به صورت Responsive و منظم نمایش داده شده است.

 

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

 

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

 

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

ارائه نمونه کد

  • در تصویر زیر نمونه کد لازم برای ایجاد جدول Responsive در بوت استرپ را ملاحظه می فرمایید.
  • البته برای دریافت اطلاعات بیشتر و نمونه عملی توصیه می کنیم حتما فیلم آموزشی را ملاحظه بفرمایید.

 

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

 

همانطور که در مثال بالا مشاهده می فرمایید :

  • در ابتدا یک تگ div با کلاس table-responsive را ایجاد کرده ایم.
  • سپس درون آن از یک تگ table استفاده کرده ایم.
  • تگ table نیز دارای کلاس های table و table-bordered می باشد.

 

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

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