شرکت طراحی دیبا

phone09149747142

آموزش گوگل موبایل فرندلی تست

آموزش گوگل موبایل فرندلی تست
سعید رحیمی آموزش, بهینه سازی وبسایت ۰۴ شهریور ۱۳۹۸

آموزش استفاده از گوگل موبایل فرندلی تست

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

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

 

آموزش گوگل موبایل فرندلی تست

 

آیا سایت شما از قوانین گوگل موبایل فرندلی پیروی میکند؟

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

 

 

گوگل فرندلی مخصوص چه افرادی است؟

در واقع این ابزار حرفه می تواند یک وسیله خوب برای تمامی وب مستر ها باشد، شما به وسیله این ابزار می توانید متوجه شوید که کاربران شما می توانند با موبایل های خود به راحتی وارد سایت شما شده و از مطالب مفید سایت شما بازدید کرده باشند. اما علاوه بر وب مستر ها گوگل فرندلی می تواند برای مشاغلی مثل کارشناسی سئو، طراحان وب سایت، بازاریابان دیجیتالی و … مفید باشد. نکته ای وجود دارد که آیا ابزار page speed insights می تواند جایگزین مناسب و کاملی برای گوگل فرندلی سایت ما باشد؟

گوگل به عنوان یک لیدر همیشه کار های خود را بصورت کامل و جامع ارائه می دهد، از این نظر این کمپانی بزرگ قصد دارد الگوریتمی را به عنوان Mobilegeddon ارائه دهد. در این الگوریتم شما می توانید قوانین محکم و دقیقی از موبایل فرندلی را مشاهده کنید. یکی از علت های ساخت و ارائه این الگوریتم ضعف در جست و جوی آن به وسیله page speed insights می باشد.

 

 

ارتقا سایت به mobile friendly گوگل

نکته جالبی که می توانیم به آن اشاره داشته باشیم، بخش نمایشی در این الگوریتم می باشد، منظور از بخش نمایشی دو قسمت جدا برای نسخه های ویندوز و موبایل است. اگر شما سایتی در زمینه موبایل دارید و قصد دارید آنرا برای افرادی که با موبایل کلمه ای را سرچ می کنند نمایش داده شود باید کد دستوری را در قسمت Head سایت خود قرار دهید که در قسمت زیر ما مثالی از این کد را برای شما خوهیم زد.

 

<head>

      <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1.0″>

</head>

 

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

 

تست گوگل فرندلی

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

 

گوگل موبایل فرندلی

گوگل موبایل فرندلی

 

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

 

 

بررسی آفلاین موبایل فرندلی

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

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

 

بررسی آنلاین گوگل موبایل فرندلی تست

این قسمت تا حدودی ساده می باشد و تنها کافیست در کادر قرمز رنگ آدرس سایت مورد نظر خود را وارد نمایید و سرانجام بر روی دکمه Test URL کلیک نمایید تا سایت شما آنالیز شود. برای وارد کردن نام سایت شما می توانید آنرا با www و یا پیشوند های http , https وارد نمایید.

 

 

خطا های موبایل فرندلی

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

 

 

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

 

حل خطا موبایل فرندلی

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

 

 

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

 

پایان تست گوگل موبایل فرندلی

در این مقاله ما می توانیم نتیجه بگیریم که با رعایت کردن نکات موبایل فرندلی، تعداد بسیار زیادی از کاربران موبایل را که پیش بینی شده بود تا ۸۰ درصد خواهند رسید جذب سایت خود کنیم. همچنین آموزش کاملی از تست گوگل فرندلی بر روی سایت به شما داده شد است. اگر قصد دارید با دیگر ابزار های سئو که باعث افزایش رتبه سایت شما می شوند آشنایی داشته باشید از دیگر مقالات تخصصی دیبا پی سی مطالعه ای داشته باشید.

 

تبدیل سازی سایت به حالت موبایل

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

بطور کلی ما می توانیم سایت خود را در ۵ قدم بهینه سازی کنیم که اولین قدم برای بهینه سازی سایت انتخاب کردن یک متد مناسب برای موبایل است.

 

 

انتخاب موبایل متد

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

 

متد Responsive Design

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

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

 

 

فریم ورک بوت استرپ

بعد از ورود به صفحه اصلی این سایت شما می توانید در قسمت بالایی سمت راست صفحه نسخه ای از بوت استرپ را مشاهده کنید، قابل ذکر است که شما می توانید این نسخه را تغییر دهید و تمامی این کار ها بستگی به نیاز کاری شما از این فریم ورک حرفه ای می باشد. امروز در تاریخ ۲۳ شهریور ماه سال ۱۳۹۸ ما قصد داریم آخرین ورژن از بوت استرپ که برابر با نسخه ۴٫۲٫۱ می باشد را بر روی سایت خود نصب کنیم. قابل گفتن است که شما با کلیک بر روی ورژن می توانید نسخه های مختلف بوت استرپ را مشاهده کنید و با کلیک کردن بر روی آن وارد نسخه مورد نظر خواهید شد.

 

 

چگونه از بوت استرپ استفاده کنیم؟

ما برای شروع آموزش کوتاه و سریع نسخه خود را بر روی ۳٫۳٫۷ قرار می دهیم، یکی از علت های آن داشتن یک داکیومنت کلی می باشد که ما به وسیله آن می توانیم صفر تا صد بوت استرپ را یاد بگیریم، جدا از این کار ما می خواهیم نحوه فعال سازی و کار با این فریم ورک را به شما آموزش دهیم تا سایت خود را به حالت موبایل بهینه سازی کنید. پس از ورود به این بخش ما می توانیم در بخش منو گزینه های زیادی را مشاهده کنیم که تمامی آنها جنبه آموزشی دارند، همچنین در قسمت میانه صفحه شما گزینه Download Bootstrap را مشاهده می کنید که با کادری قرمز رنگ مشخص شده است.

 

 

کد های CDN

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

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

 

 

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

 

محتوای بوت استرپ

در واقع بوت استرپ از محتوای مثل CSS, JavaScript و Font ها تشکیل شده است، شما علاوه بر ریسپانسیو کردن سایت خود و تبدیل آن به یک سایت موبایلی می توانید از دیگر ویژگی های آماده بوت استرپ استفاده کنید، بطور مثال شما با استفاده از کد های آماده می توانید دکمه ها، منو ها، تصاویر و موارد زیادی را بسازید که در قسمت آموزشی خود سایت بوت استرپ تمامی این موارد با مثال توضیح داده شده است.پس از دانلود بوت استرپ شما فایلی حاوی مقدار های Css, Js و Font را مشاهده می کنید که در تصویر زیر می توانید نمونه از آنها را مشاهده کنید.

 

 

قابلیت Css در BootStrap) BS)

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

 

<a href=”https:dibapc.com” targer=”_blank” class=”btn btn-danger” > DibaPc Presents…</a>

 

اگر از قبل با زبان نشانه گذاریه Html آشنایی داشته باشید متوجه خواهید شد که هر تگ a می توانید در یک محیط باز و در محیطی دیگر بسته شود و به مقادیری که در میانه این دو کد قرار گرفته باشند لینک داده می شود، همچنین این تگ دو مقدار اصلی می گیرد که href می تواند بیانگر مقصد لینک ما باشد و Target ما می تواند هدف ورودی ما باشد که در صفحه ای جدید اجرا شود و یا خیر. بطور کلی تگ های Html می توانند دو مقدار ID و Class را بگیرند و نسبت به آنها واکنش نشان دهند، نکته قابل ذکر آن است که Css در بوت استرپ بر اساس کلاس ها کار می کند که در مثال بالا می توانید دو کلاس Btn و btn-danger را مشاهده کنید.

 

فراخوانی کلاس ها در css

با فراخواندن کلاس btn ما به کد های آماده css رفته و دکمه آماده به ما نمایش داده می شود که بصورت پیشفرض دیفالت می باشد، همانطور که مشاهده می کنید در کلاس بعدی btn-danger قرار گرفته است و کلاسی متفاوت به حساب می آید، زمانی که شما از این کلاس استفاده کنید رنگ دکمه شما قرمز می شود، همچنین شما با آموختن کد های بیشتر می توانید رنگ ها و ویژگی های خاص تری را به دکمه و شی های خود بدهید. با کلیک بر روی فایل css ما می توانیم پوشه های زیادی را با فرمت css مشاهده کنیم که هر کدام وظیفه خاص خود را دارد.

توجه داشته باشید که هر ۳ فایل اصلی همانند فایل css ما می باشند و هر کدام وظیفه خاصی در بوت استرپ را عملی می کنند.

 

 

چگونه فایل های خود را به قالب متصل کنیم؟

در میان این همه پوشه شاید سوال باشد که ما باید کدام یک از این فایل ها را به قالب خود متصل کنیم تا بوت استرپ بتواند اجرایی شود، ما برای اجرایی کردن بوت استرپ خود باید فایل های اصلی خود را به قالب متصل کنیم، برای اینکار اول باید فایل اصلی که الویت بیشتری نسبت به دیگر فایل ها دارد را متصل کنیم. در میان فایل های css ما bootstrap.css را بصورت یک لینک در ابتدا و یا در داخل head خود بارگذاری می کنیم. برای درک بهتر به مثال زیر توجه کنید.

 

<head>

   <link rel=”stylesheet” type=”text/css” href=”bootstrap.css” >

</head>

<body>

   <script src=”bootstrap.js”></script>

</body>

نحوه جایگذاری فایل ها

با دقت به مثال بالا توجه کنید، ما بر اساس الویت های خود فایل های خود را به قالب متصل می کنیم، توجه داشته باشید که فایل های css به دلیل داشتن جلوه نمایشی ابتدا باید بارگذاری شوند برای اینکار فایل های link خود را در قسمت Head و فایل های جاوا اسکریت خود را در انتهای تگ بدنه خود قرار می دهیم، در این صورت بعد از بارگذاری کامل سایت جاوا اسکریپت شما بارگذاری می شود و این روش کاملا استاندارد می باشد. نکته مهم وجود دارد که گاه ممکن است در آدرس دهی مشکلی وجود داشته باشد و کد های شما اجرا نشوند، در زمانی که کد های شما در کنار یکدیگر قرار گرفته اند می توانید تنها با نام بردن آن کد ها را اجرا کنید اما اگر شما کد های خود را در مسیر های مختلف گذاشته اید می توانید از روش های زیر استفاده کنید.

 

روش های لینک دهی

اگر فایل های اصلی شما در مسیر هایی جلوتر از و داخلی تر از فایل اصلی شما است شما می توانید با روش زیر فایل ها را برای خود فراخوانی کنید اما گاهی پیش می آید که شما باید از فایلی بیرون بیایید، در آدرس دهی چگونه می توانیم این کار را انجام دهیم؟ در مثال ۱ ما می خواهیم فایل درونی را اجرایی کنیم که داخل چندین پوشه جلویی آن می باشد، ما با هر بار گذاشتن علامت / یکبار به پوشه جلویی حرکت می کنیم پس در ابتدا با ورود به پوشه content / پوشه Image می توانیم به مقدار خود دست پیدا کنیم، در این بخش مقدار poster 1 مقدار اصلی ما می باشد.

 

۱ ) “content/image/poster1”

 

لینک دهی به سمت عقب

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

 

۲) “../content”

 

همانطور که در مثال بالا مشاهده می کنید ما در حال حاضر در پوشه style می باشیم و قصد داریم وارد فایل content شویم، برای هر بار عقب نشینی ما باید از .. استفاده کنیم، اگر فایل های ما پیچیده و تو در تو بوده است می توانیم به شکل زیر استفاده کنیم.

 

۳) “../../content/image”

نکته: هر علامت اشاره .. می تواند نشان دهنده بازگشت از یک فایل به سمت عقب باشد.

 

آدرس دهیه کلی

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

۴) “/content/image/poster1”

۵) “/content/movie/download1”

 

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

 

استفاده از کلاس های اصلی واکنشگرایی

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

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

 

<div class=”row”>

   <div class=”col-lg-12 col-md-8 col-sm6 col-xs-1″>

   </div>

</div>

 

ساختار کلاس های واکنشگرایی

با دقت به مثال بالا نگاه کنید، در تگ و یا دایو اول که به عنوان یک تگ پدر شناخته می شود ما کلاسی را به عنوان Row انتخاب کرده ایم، هنگامی که row وارد کلاس می شود Div و یا هر تگ ما اندازه ای برابر با ۱۰۰ درصد می گیرد و یک ستون را احاطه می کند. بطور کلی هر Col می تواند مقدار از ۱ تا ۱۲ داشته باشد و بسته به تعداد انتخابی شما می تواند فضای مورد نظر را گرفته باشد. با کمی دقت متوجه می شوید که ما برای Div فرزند ۴ col تعریف کرده ایم که مخفف اندازه های بزرگ، متوسط، کوچک و موبایل می باشد.

در صورتی که ما قصد داریم در اندازه خاصی div مورد نظر نشان داده نشود می توانیم از مقدار col-lg-hidden استفاده کنیم، در این صورت در اندازه بزرگ تگ شما نمایش داده نمی شود، اما اگر خواهان نایش تگ هستید می توانید نسبت به ایده های خود این اندازه ها را محاسبه کنید. توجه داشته باشید که اندازه های شما می توانند  دلخواه باشند، همچنین تگ های شما می توانند تو در تو باشند.

 

نتیجه گیری استفاده از بوت استرپ

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

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

مطالب مرتبط