نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 6321
تاریخ بروزرسانی ۳ خرداد ۱۴۰۱

طراحی سایت ریسپانسیو واکنش گرا با بوت استرپ

طراحی سایت ریسپانسیو Responsive واکنش گرا از موضوعاتی است که این روزها ذهن طراحان سایت و حتی مدیران سایت را به خود مشغول کرده است. اکثر کاربرانی که در حال جستجو در اینترنت هستند به صفحات وب سایت هایی که ریسپانسیو هستند بر میخورند و متوجه میشوند که ظاهر وب سایت مورد نظر در تبلت با گوشی همراه آنها و کامپیوتر شخصی شان فرق میکند. این همان طراحی سایت ریسپانسیو با بوت استرپ است.

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

طراحی سایت ریسپانسیو با بوت استرپ

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

بوت استرپ (Bootstrap) از محبوب ترین فریم ورک های سمت کلاینت برای طراحی صفحات وب است. که شما با استفاده از آن می توانید سرعت طراحی سایت را افزایش دهید و همچنین اطمینان داشته باشید که سایت شما با همه ی مرورگرها و همه ی دیوایس ها سازگار است.

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

برای آن که سایت های ریسپانسیو، سایت هایی هستند که خود را با اندازه ی صفحه نمایش  تلفن همراه یا تبلت به خوبی سازگار کرده و  انجام کار با آن ها بسیار روان و آسان می باشد, و این خود یک قابلیت بسیار جذاب برای کاربران وب سایت ها در هنگام استفاده می باشد. از دیگر مواردی که باعث اهمیت موضوع ریسپانسیو بودن سایت می شود، تنوع سیستم عامل ها و مرورگر های موجود در بازار می باشد. سایت ریسپانسیو توانایی مچ شدن و سازگاری با انواع سیستم عامل ها (ویندوز – اندروید – لینوکس –  IOS– مکینتاش- یونیکس و…) و انواع مرورگر های جدید و قدیمی عرضه شده را دارند که این خود یکی از مهم ترین نقاط قوت این نوع سایت ها می باشد.

طراحی سایت با بوت استرپ و آموزش ریسپانسیو با بوت استرپ

برای شروع کار کافی است یک فایل با پسوند html ایجاد کنید.

در بوت استرپ به دلیل اینکه از دستورات html  و  css استفاده می شود، ابتدا از اعلان DOCTYPE استفاده می کنیم. در تگ head ، برای اینکه صفحه ی وب واکنش گرا باشد از تگ meta استفاده می شود.

در تگ meta ویژگی width=device-width بررسی می کند که عرض صفحه ی وب شما با عرض دستگاه های مختلف برابر باشد و ویژگی initial-scale=1 میزان زوم اولیه را هنگام لود شدن صفحه مشخص می کند. فایل css، کتابخانه ی جی کوئری و فایل جاوا اسکریپت بوت استرپ را هم باید در قسمت head  فراخوانی کنید.
به کد زیر دقت کنید با نوشتن این کد یک صفحه ی بوت استرپ ایجاد کرده ایم.

آموزش برنامه نویسی بوت استرپ

کلاس container در بوت استرپ

برای بسته بندی کردن محتوای سایت در Bootstrap می توان از کلاس container یا container-fluid استفاده کرد.
کلاس container یک صفحه ی وب با عرض ثابت ایجاد می کند و سایت شما از چپ و راست کمی فاصله دارد و کلاس container-fluid کل عرض صفحه را می پوشاند و سایت شما از کناره ها فاصله نخواهد داشت.
در کد بالا از کلاس container استفاده شده است و خروجی این کد به صورت زیر می باشد.

طراحی سایت واکنش گرا

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

Bootstrap صفحه ی وب را به دوازده ستون تقسیم می کند و عناصر وب در این دوازده ستون قرار می گیرند. هر جا که نیاز باشد می توان با ادغام ستون ها، ستون بزرگتری ایجاد کرد. در تصویر زیر می توانید تقسیم بندی ها را مشاهده کنید. دقت کنید که جمع اعداد هر ردیف برابر با دوازده می شود.

webyar3

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

  • Xs  برای تلفن های همراه (مخفف extra small)
  • Sm  برای تبلت (مخفف small)
  • Md  برای کامپیوترهای رومیزی (مخفف medium)
  • Lg  برای رایانه های بزرگتر( مخفف large)

Div با کلاس row برای ایجاد یک ردیف در بوت استرپ استفاده می شود. حالا باید با استفاده از کلاس های شبکه بندی ردیف ها را به ستون های دلخواه تقسیم کنید.  برای این کار کافی است از کلاس col استفاده کنید. بعد از آن باید کلاس شبکه بندی را بنویسید. سپس عدد قرار می دهیم که نشان دهنده ی پهنای ستون است.

به کد زیر دقت کنید:

آموزش کدهای بوت استرپ

با استفاده از کد بالا سه ستون مساوی ایجاد کردیم. با تغییر سایز مرورگر این سه ستون زیر هم قرار می گیرند. خروجی این کد به صورت زیر است.

آموزش طراحی سایت با بوت استرپ

آیا طراحی ریسپانسیو راه حل تمامی مشکلات جهت افزایش بازدید مشتریان است؟

اگر چه طراحی سایت ریسپانسیو بسیار مهم است، اما همیشه نه! کاربران دسکتاپ اغلب دوست دارند تمام مطلب را ببینید و آن را بخوانند و از همه امکانات سایت استفاده کنند. اما کاربران موبایل می خواهند همه چیز خلاصه باشد و خیلی سریع به همه امکانات سایت دسترسی داشته باشند. پس بهترین راه حل این است که نوع کاربران خود را بشناسید. و متناسب با نوع کاربران اقدام به طراحی سایت کنید. اما خب طراحی ریسپانسیو را دیگر نمی شود کنار گذاشت.

با تشکر از همراهی شما، تیم طراحی سایت وب یار.

مقالات مرتبط

نشانی ایمیل شما منتشر نخواهد شد.