0

سبد خرید شما خالی است.

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

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

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 785
تاریخ بروزرسانی 12 آوریل 2018

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

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

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

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

چراوب سایت های ریسپانسیو( واکنش گرا) ؟

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

ایجاد صفحه وب با بوت استرپ

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

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

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

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

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

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

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

 

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

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

  • Xs  برای تلفن های همراه
  • Sm  برای تبلت
  • Md  برای کامپیوترهای رومیزی
  • Lg  برای رایانه های بزرگتر

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

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

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

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

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

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

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

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

مطالب مرتبط
مطالعه :

در آموزش کسب در آمد از یوتیوب به دلار بصورت قدم به قدم شما موارد زیر را یاد خواهید گرفت. که چطور اکانت یوتیوب بسازید. در اکانت خود کانال خود را ایجاد نمایید. بنری زیبا برای اکانت خود طراحی نمایید. برای اکانت خود تاییدیه بگیرید. ویدیو های با موضوع جالب و جذاب بسازید . ویدئوهای خود را ویرایش کنید. ویدئو های خود را  با دیگران به اشتراک بگذارید. ویدئو های خود را برای گوگل بهینه سازی کنید. آموزش تمامی امکانات پنل وب یار و  استفاده از لینک دعوت. خلاصه آموزش کسب درآمد از یوتیوب مرحله اول: یه کانال در یوتیوب بسازید و موضوع فعالیتتون رو مشخص کنید. بهتره حول موضوع خاصی محتوا تولید کنید. مرحله دوم: از طریق آدرس زیر اکانتتون رو با استفاده از یه شماره موبایل خارجی (که از این به بعد شماره تماس اصلی شما خواهد بود) verify کنید: https://www.youtube.com/verify اگه این کار رو انجام بدید تمامی امکانات Youtube Studio برای شما فعال خواهد شد. مرحله سوم:آموزش کسب درآمد از یوتیوب بعد از این که حساب کاربریتون رو verify کردید از طریق لینک زیر وارد Youtube Studio بشید و ۴ مرحله ای که پیش روتون هست رو طی کنید: https://www.youtube.com/account_monetization ابتدا قوانین و مقررات رو بخونید و تایید کنید. بعدش مطابق تصویر زیر حساب Google Adsense رو متصل کنید. بعد از این که وارد حساب Adsense میشید […]

دریافت ساب اسکرایب get free subscribe
مطالعه :

در روش آموزش دریافت subscribe YouTube ساب اسکرایب رایگان یوتیوب ابتدا در پنل زیر عضو میشوید و با کلیک بروی گزینه پنل رایگان ساب اسکرایب یوتیوب های خود را دریافت می کنید. سامانه بروز شد و رفرال گیری جهت افزایش دوبرابری ساب اسکرایب ها اضاهه شد   https://webyar.net/youtub/user/login آموزش دریافت ممبر کانال یوتیوب و subscribe YouTube ساب اسکرایب رایگان یوتیوب free subscribe افزایش ساب اسکرایب دریافت ساب اسکرایب ساب اسکرایب رایگان آموزش دریافت ساب اسکرایب دریافت subscribe youtube آموزش دریافت ساب اسکرایب رایگان آموزش دریافت subscribe ازسایت youtube ساب اسکرایب یوتیوب subscribe youtube free subscribe youtube get subscribe youtube site get youtube subscribe pannel افزایش subscribe یوتیوب فروش subscribe youtube خرید ساب اسکرایب یوتیوب خرید subscribe youtube subscribe youtube رایگان طبق فیلم آموزشی جلو بروید.     YouTube یکی از وب سایت های می باشد برای کسب درآمد می توان در آن ویدئو ها را آپلود کنید. با آپلود ویدئو ها در سایت یوتیوب ، یوتیوب در میان ویدئو های شما تبلیغاتی را به نمایش می‌گذارد که این امر باعث افزایش درآمد شما به دلار می‌شود. یوتیوب در ازای هر ویدئو می‌تواند به شما بین یک تا چند هزار دلار پرداخت کند. این امر بستگی به تعداد بازدید ها و سابسکرایب های شما دارد. برای آن که درآمد خوبی از یوتیوب داشته باشید بهتر است برای هر ویدیو یک تصویر […]

آموزش رشد و موفقیت در مشاغل اینترنتی
مطالعه :

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

serial-licens-Windows-10-pro-retail
مطالعه :

فروش سریال نامبر ویندوز ده پرو Windows 10 Pro Retail لایسنس ویندوز ۱۰ نسخه اورجینالفروش لایسنس ویندوز ۱۰ اورجینال،  آخرین محصول ویندوز از شرکت مایکروسافت فقط 900 هزار تومان

نمایشگاه ایران پلاستیک
مطالعه :

دانلود لیست شرکت کنندگان نمایشگاه پلاستیک ایران پلاست شامل اطلاعات دانلود لیست صنایع پلاستیک نام مدیر نام شرکت شماره موبایل آدرس سایت ایمیل موبایل نماینده

فروش دامنه
مطالعه :

خرید و فروش دامنه زیبا برای راه اندازی سایت و فروشگاه اینترنتی یکی از خدمات با ارزش مجموعه وب یار است که کار راه اندازی سایت و انتخاب نام دامنه را بسیار راحت تر کرده و مدیران سایت با خرید و فروش دامنه به راحتی میتوانند دامنه با ارزش مد نظر خود را خرید کنند. همیشه داشتن نام دامنه زیبا در بازدید کننده تاثیر مثبت می گذارد. مثلاً اگر شما اسم سایتتون web-yar-net ir باشه خیلی فرق میکنه تا اینکه نام سایتتون WEBYAR.NET کوتاه و زیبا باشه . تعداد حروف و کاراکتر ها، معنی کلمات، و هماهنگی آهنگ اسم دامنه تاثیر بسیار زیادی بر روی خود سایت و کاربران سایت و برندینگ سایت دارد. وقتی نام سایت زیبا باشد کاربران سایت به راحتی اون رو به خاطر می سپارند ولی وقتی نام دامنه طولانی باشدیا  بی معنی باشد یا از حروف مختصر بی معنی طولانی تشکیل شده باشد. به سختی می شوند جستجو کرد یا آن را به حافظه سپرد مگر اینکه از تعداد حروف خیلی کمی درست شده باشد . مثلا فروش دامنه 3 حرفی تا به راحتی بشود ان را در ذهن سپرد. وقتی سایتی نام دامنه بسیار با ارزشی دارد، ان برند و ان سایت خود به خود با ارزش و قوی به حساب میاد .پس حتماً دامنه ای زیبا برای سایتتون انتخاب کنید و در خرید […]

دیدگاه ها

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

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