طراحی سایت با bootstrap

طراحی سایت با bootstrap

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

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

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

حالت واکنشگرا

اگر قصد دارید سایت شما در تمامی حالات (لزولشن های بزرگ و کوچک) درست اجرا شود باید از این قابلیت فریم ورک استفاده کنید. در بوت استرپ، 4 حالت اصلی برای ریسپانسیو کردن قرار گرفته است، به ترتیب می توانیم به LG (بزرگ), MD (متوسط), SM (کوچک) و XS (حالت گوشی و تبلت) اشاره داشته باشیم. حالت واکنشگرا در حالت عرضی در قالب شما اتفاق می افتد، یعنی شما ستون به ستون می توانید سایت خود را درست کرده باشید. با توجه به معیار های بوت استرپ عدد 12 برای تقسیم بندی این ستون قرار گرفته است، به دلیل داشتن ضریب 2 عدد 12 می تواند یک تقسیم بندی متناسب را برای هر ستون ایجاد کند. پس شما به ترتیب می توانید در سایز های مختلف از هر 12 قسمت یک یا چند قسمت آنرا فرا بگیرید در قسمت زیر ما مثالی برای شما خواهیم زد.

col-lg-6 col-md-6 col-sm-4 col-xs-12

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

چگونه اجسام خود را واکنشگرا کنیم ؟

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

<div class=”col-lg-6 col-md-6 col-sm-4 col-xs-12″></div>

حال ما یک Div واکنشگرا ساخته ایم و به همین ترتیب می توانیم این حالت های واکنشگرا را با همین کلاس ها اما با مقادیر مختلف در جا به جای مختلف سایت خود استفاده کرده باشیم. توجه داشته باشید که شما بدون بوت استرپ می توانید اندازه Div خود را 100% کرده باشید اما اندازه های شما ممکن است در سایز های کوچک تر با مشکلاتی برخورد داشته باشند.

آیکون های فونت

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

آیکون فونت چیست ؟

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

نحوه استفاده آیکون ها

شما برای استفاده کردن از این آیکون ها بهتر است از Span ها استفاده کرده باشید، در واقع یکی از کاربرد های این تگ استفاده شدن در داخل دیگر تگ ها می باشد که می خواهیم یک مقدار خاص یا ورودی به آن بدهیم. می توانیم با نوشتن یک Span در داخل یک Div , p و … این آیکون را ایجاد کرده باشیم. در مثال زیر شما با نحوه نوشتن یک آیکون بیشتر آشنا شوید.

<div> <span class=”glyphicon glyphicon-star”></span> </div>

<p> <span class=”glyphicon glyphicon-star”></span> </p>

نتیجه گیری

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