در مقاله قبلی در مورد بوت استرپ صحبت کردیم و گفتیم که چرا بوت استرپ فریم ورک محبوب بین طراحان سایت است. در این جلسه سعی میکنیم شما رو با این فریم ورک بیشتر آشنا کنیم و نحوه استفاده از این فریم ورک را آموزش میدهیم.
نصب بوت استرپ در پروژه طراحی سایت
برای استفاده فریم ورک بوت استرپ در کدهای طراحی سایتتان باید ابتدا وارد سایت getbootstrap.com شوید و بوت استرپ را دانلود کنید. فایلی که دانلود مکنید داخلش فایل css و js است که باید استایل min (استایل فشرده شده) را در head سایتتان اضافه کنید و js min را در انتهای body فراخوانی کنید تا به درستی اجرا شود.
نکته: هنگام استفاده از بوت استرپ و یا حتی کدهای شخصی خودتان کد ریسپانسیو در head را فراموش نکنید:
<meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”>
این مواردی که تا الان گفتیم برای شروع کار ابتدایی بوت استرپ کافی است.حالا شروع میکنیم استفاده از کدهای بوت استرپ را یاد میگیریم
کد نویسی با بوت استرپ
در سایت /www.w3schools.com/bootstrap میتونید تمام مواردی که در بوت استرپ قابل استفاده است را یاد بگیرید.در ستون سمت چپ این سایت تمامی المان های استفاده شده در بوت استرپ که به طراحان برای طراحی سایتشان کمک میکند را آموزش داده است. در این سایت کلاس های اختصاصی جدول ، عکس ، آیکن ها و منو… هر کدام به صورت جداگانه توضیح داده شده است
اولین گام و در واقع مهمترین گام grid بندیهای استفاده شده در بوت استرپ است که بیشتر طراحان برای ستون بندی های سایتشان از بوت استرپ استفاده میکنند تا بتواند به راحتی سایت خودشان را ریسپانسیو و استاندارد طراحی کنند. در آینده در مورد ستون بندی ها و ردیف بندی های بوت استرپ بیشتر صحبت میکنیم.
بوت استرپ دارای کلاس هایی است که باید از اون کلاس ها در کدهای خودتان استفاده کنید. به عنوان مثال در عکس بالا که کدهای grid آماده است در div ها از کلاس های بوت استرپ برای ستون بندی استفاده شده است.
در آموزش های بعدی در مورد grid های بوت استرپ بیشتر صحبت میکنیم. با آموزش های طراحی سایت اسپیناس همراه باشید
