آموزش برنامه نویسی مایکروسافت مرجع فارسی آموزش برنامه نویسی
در این مقاله از وب سایت Aspcore.ir در مورد ایجاد جدول Responsive در بوت استرپ صحبت خواهیم کرد. همچنین مطابق قاعده و روال خود یک فیلم آموزشی نیز به صورت یک پروژه کوچک در این رابطه تهیه کرده ایم که در ادامه مقاله می توانید مشاهده بفرمایید.
طراحی ریسپانسیو چیست ؟
وقتی کاربری وارد سایت شما می شود و یا هنگامی که پروژه ای را تحویل به مشتری خود می دهید شاید در نگاه اول مهم ترین نکته شکل و شمایل سایت شما باشد که می تواند چشم نواز باشد. طراحی ریسپانسیو به معنی تنظیم اندازه اجزای موجود در صفحه با هر اندازه می باشد.
استفاده از بوت استرپ
برای ریسپانسیو کردن یک وب سایت فریم ورک های زیادی وجود دارد. اما یکی از شناخته شده ترین این فریم ورک ها که مطمئنا در مورد آن شنیده اید بوت استرپ می باشد. در این آموزش با استفاده از فریم ورک BootStrap یک جدول را به صورت ریسپانسیو طراحی خواهیم کرد.
ایجاد جدول Responsive در بوت استرپ
به تصاویر زیر نگاه کنید :
در تصویر بالا یک جدول در مرکز صفحه قرار دارد اما همانطور که مشاهده می کنید حالت ریسپانسیو و منظمی ندارد. اما در تصویر زیر همین جدول به صورت Responsive و منظم نمایش داده شده است.
اگر در تصویر بالا اندازه مرورگر را کوچک تر یا بزرگتر هم کنیم دقیقا حالت ریسپانسیو بودن حفظ خواهد شد.
ایجاد جدول Responsive در بوت استرپ
ارائه نمونه کد
- در تصویر زیر نمونه کد لازم برای ایجاد جدول Responsive در بوت استرپ را ملاحظه می فرمایید.
- البته برای دریافت اطلاعات بیشتر و نمونه عملی توصیه می کنیم حتما فیلم آموزشی را ملاحظه بفرمایید.
همانطور که در مثال بالا مشاهده می فرمایید :
- در ابتدا یک تگ div با کلاس table-responsive را ایجاد کرده ایم.
- سپس درون آن از یک تگ table استفاده کرده ایم.
- تگ table نیز دارای کلاس های table و table-bordered می باشد.