0

هیچ محصولی در سبد خرید نیست.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی سایت حرفه ای اصفهان, بهینه سازی سایت , بازاریابی و دیجیتال مارکتینگ 09133886881 احمدپور

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
4/5 - (1 امتیاز)
تعداد بازدید 4140
تاریخ بروزرسانی ۳ خرداد ۱۴۰۱

طراحی سایت ریسپانسیو 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 استفاده کنید. بعد از آن باید کلاس شبکه بندی را بنویسید. سپس عدد قرار می دهیم که نشان دهنده ی پهنای ستون است.

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

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

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

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

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

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

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

4/5 - (1 امتیاز)
مطالب مرتبط
معرفی شبکه های اجتماعی محبوب
مطالعه :

دنیای امروزه دنیای ارتباطات می باشد واهمیت رسانه ها بیشتر از همیشه احساس می شود. شبکه های اجتماعی با هدف ارتباط گرفتن افراد به وجود آمد و امروزه برای تبلیغات کسب و کارها بسیار مهم تلقی می شود. درعصر ارتباطات اغلب کسب وکارها برای پیشرفت زمینه ی شغلی خود به سمت تبلیغات در شبکه های اجتماعی روی آورده اند.شبکه های اجتماعی محبوب در اطلاع رسانی برای خبرهای روزانه نقش بسیار مهمی را ایفا می کنند. با وب یار همراه باشید تا با بهترین شبکه های اجتماعی در ایران آشنا شویم. در جامعه ی امروزی شبکه های اجتماعی جزئی از زندگی مردم شده که برای تبلیغات ،اطلاع رسانی ها و آموزش و…از این شبکه ها بهره می برند.باتوجه به همگانی شدن شبکه های اجتماعی بین مردم لازم است که در مورد هر کدام از این شبکه ها اطلاعاتی کسب کنیم تا از جوامع امروز عقب نمانیم. تاریخچه مختصری در مورد شبکه های اجتماعی : ریشه شکل گرفتن مفهوم شبکه های اجتماعی در سال 1960در دانشگاه ایلی نویز در آمریکا بود.و بعد از روی کار آمدن مفهوم شبکه های اجتماعی در سال 1997سایتی تشکیل شد که اجازه ایجاد پروفایل به افرادمختلف را داد هدف این سایت جمع کردن لیستی از دوستان در کنار هم بود و بعد از آن هم شبکه های اجتماعی مختلفی با اهداف متنوع روی کار آمد. در سال […]

طراحی قالب وردپرس
مطالعه :

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

ساخت نرم افزار بدون کد نویسی
مطالعه :

ساخت نرم افزار بدون کد نویسی و با استفاده از کدنویسی انجام می‌شود. در این مقاله از وب یار قصد داریم تا به چگونگی ساخت نرم افزار تحت ویندوز بدون کد نویسی و مزایای آن نسبت به روش‌های قدیمی بپردازیم. با پیشرفت تکنولوژی بستر استفاده از موبایل‌ها و کامپیوترها گسترده‌تر شده است، زیرا روز به روز به تعداد کاربران آن‌ها افزوده میشود. اگر شما نیز ایده‌ای برای تولید نرم افزار و سرویس‌دهی در این بستر را دارید، بهتر است هر چه سریعتر دست به کار شوید و از این فضا که پتانسیل بالایی دارد برای کسب درآمد استفاده کنید. ساخت نرم افزار بدون کد نویسی چگونه ممکن است؟ این روزها دیگر نیاز نیست تا پروسه‌ی طولانی آموزش برنامه نویسی را طی کنید تا بتوانید به ساخت نرم افزارها بپردازید. در گذشته اگر قصد ساخت برنامه‌ای را داشتید باید ساعت‌ها زمان صرف می‌کردید تا با استفاده از کدها دستور العمل‌هایی را برای برنامه تعریف کنید تا عملکرد درستی داشته باشد. همچنین پس از تعریف آن دستور العمل‌ها باید مراحل آزمون و خطا را طی می‌کردید تا به اصطلاح برنامه‌ای که ساخته‌ای را باگ گیری (اشکال‌گیری) کنید. اما دیگر ساخت نرم افزار بدون کد نویسی یک رویا نیست! متخصصان نرم افزارهای زیادی را به عنوان ابزارهای کمکی طراحی کرده‌اند تا کاربران بتوانند بدون نوشتن حتی یک خط کد، نرم افزار ایده‌آل خود […]

مرجع جاوا اسکریپت وب یار
مطالعه :

در این لینک مقالات مرجع جاوا اسکریپت برای شما عزیزان فراهم شده تا دسترسی راحت تری به مطالب حوزه جاوااسکریپت داشته باشید. آموزش زبان جاوا اسکریپت javascript + جلسه اول زبان برنامه نویسی جاوا اسکریپت یک زبان سمت کلاینت (کاربر) است و روی اکثر مرورگر های امروزی کار می کند. این زبان به تمام خصوصیت های عناصر html و css دسترسی داشته و نسبت به رویدادهای کاربر واکنش نشان می دهد   محل قرار گیری کدهای جاوا اسکریپت + جلسه دوم تگ های جاوا اسکریپت این توانایی را دارند که در هر جایی از صفحات html به کار روند. آموزش دستورات مهم جاوا اسکریپت + جلسه سوم دستور جاوا اسکریپت شامل مقادیر، عملگرها،کلمات کلیدی و توضیحات است.دستورات جاوا اسکریپت زیر همان کلمات کلیدی رزرو شده ای هستند که نمی توانند به عنوان نام متغیر به کار روند.    آموزش توضیحات در جاوا اسکریپت + جلسه چهارم توضیحات در جاوا اسکریپت به دو صورت به کار می روند: 1- توضیحات تک خطی 2- توضیحات چند خطی تعریف متغیرها در جاوا اسکریپت + قسمت پنجم متغیرها در javaScript حافظ و حامل اطلاعات هستند. یعنی این متغیرها اطلاعاتی را در خود ذخیره نموده و در حین اجرای برنامه با شرایط مختلف تغییر می کنند.  انواع داده ها در JavaScript + جلسه ششم زبان جاوا اسکریپت نیز همانند سایر زبان های برنامه نویسی از انواع داده های عددی (Number)  ، رشته ای (String)  ، […]

3 لیست مهم در HTML5
مطالعه :

در این مقاله از وب یار میخواهیم لیست ها در HTML5 که شامل لیست مرتب ، لیست نامرتب و لیست توضیحات را به شما بگوییم. آموزش لیست ها در HTML5 لیست ها کاربردهای فراوانی در متون مختلف داشته و حتما تا به حال نمونه هایی از آن ها را در کتاب ها ، مجلات ، روزنامه ها و.. دیده اید. اما کاربرد لیست ها محدود به مطالب چاپی نمی شود و امروزه در انواع طراحی صفحات وب ، شبکه های اجتماعی و یا پیام رسان ها نیز دیده می شوند. با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را گروه بندی کنید. HTML نیز به منظور ایجاد انواع لیست ها در صفحات وب تگ هایی مشخص کرده است. در HTML5  سه نوع لیست با کاربردهای متفاوت وجود دارد که شامل موارد زیر است : Unordered Lists Ordered Lists Description Lists در ادامه به کاربرد و نحوه ی نوشتن هر لیست می پردازیم : لیست مرتب Unordered Lists در این لیست ها ترتیب آیتم ها اهمیت نداشته و تنها عناصر مرتبط به هم در یک لیست قرار می گیرند. به عنوان مثال به لیست زیر توجه کنید: انواع نوشیدنی های گرم قهوه چای نسکافه همان طور که مشاهده می کنید در این لیست ترتیب اهمیت نداشته و فرقی نمی کند […]

مطالعه :

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

دیدگاه ها

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

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