آموزش فریمورک foundation – بلوک بندی صفحه

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

ما صفحه خودمون رو با کمک foundation به ردیف و ستون های مختلفی تقسیم میکنیم , هرکدوم از این تقسیم بندی ها خودش رسپانسیو هم خواهد بود , اما نحوه ی عملکرد رسپانسیو بودن رو خودتون مشخص میکنید. بریم به نکات اصلی بپردازیم :

در فریمورک foundation صفحات به سه دسته تقسیم میشن:

۱- صفحاتی که پهنایی (width) بین ۰ تا ۷۴۰ پیکسل دارند رو  small در نظر میگیریم و معمولا موبایل ها و تبلت ها چنین سایزی دارند

۲- صفحاتی که پهنایی (width) بین ۷۴۰ تا ۱۰۲۴ پیکسل دارند رو با medium در نظر میگیریم و معمولا کامپیوتر ها و مانیتور های با سایز معمولی چنین سایزی دارند.

۳- صفحاتی که پهنایی (width) بیشتر از ۱۰۲۴ پیکسل دارند رو با large در نظر میگیریم و مانیتور های با اندازه ی بزرگ رو شامل میشه.

ما در فریمورک foundation هر صفحه رو به صورت ۱۲ گرید (grid) یا ۱۲ ستون در نظر میگیریم. اگه نمیدونید گرید چیه بهتره اینجا رو بخونید تا بهتر متوجه بشید.

به همراه هر کدوم از صفحات با سایز بندی های small , medium و large یک عدد بین ۱ تا ۱۲ در نظر گرفته میشه که سایز عرض بخش های مورد نظرمون رو توی صفحه مشخص میکنه , این مقدار به عنوان کلاس تگ مورد نظر استفاده میشه , به مثال زیر دقت کنید:(پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید))

در مثال بالا ابتدا فریمورک foundation رو به صفحه خودمون اظافه کردیم و بعدش یک ردیف ساختیم , ساختن ردیف در فریمورک با کلاس row انجام می شود. هر ردیف میتونه به چندین ستون تقسیم بشه, ستون ها با کلاس column یا columns ایجاد میشن(تفاوتی نداره این دو کلاس) , من در مثال بالا صفحه خودم رو به ۲ ستون تقسیم کردم که یکی سایزش برابر با ۵ ستون و یکی دیگه برابر با ۷ ستون میشه. دوستان عزیز یک ردیف دارای یک ماکزیمم سایز است , اگه میخواید که یک ردیف درون صفحه خودتون به صورت تمام صفحه باشه باید از کلاس expanded استفاده کنید 🙂 به همین راحتی. به مثال زیر دقت کنید: (پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید) و با مثال قبلی مقایسه کنید)

در مثال بالا من از کلاس small استفاده کردم که باعث میشه سایزی که استفاده میکنم در مانیتور های با عرض ۰ پیکسل به بالا اعمال بشه 😀 اگه بخوام که سایز مورد نظر من فقط (دقت کنید گفتم فقط) توی صفحه هایی با عرض ۱۰۲۴ به بالا اندازه ی مورد نظر من اعمال بشه باید از کلاس large استفاده کنم , به مثال زیر دقت کنید:

من این دو مثال رو براتون ذخیره کردم , حالا میتونید مثال اول رو از اینجا ببینید و مثال دوم رو نیز از اینجا به صورت پیش نمایش ببینید , اندازه ی عرض صفحه ی مرورگر خودتون رو کوچیک کنید و نگاه کنید چه تفاوتی توی حالتی که صفحه کوچیک بشه وجود داره (صفحه کوچیک شبیه سازی از حالت مانیتور کوچیکتر است) در مثال اول حالت ستون ها حفظ میشه ولی در مثال دوم توی نمای کوچکتر ستون ها تمام صفحه میشن! این تفاوت در حالت رسپانسیو رو نشون میده که میتونیم ایجاد کنیم 😀 دیگه بهتر از این چی میخواید؟

در مثال اول حالت ۵ به ۷ حفظ می شود اما در مثال دوم با کوچک شدن صفحه , ستون ها برابر با تمامی عرض صفحه یا ۱۲ میشن. حالا میشه با ترکیب کردن کلاس های small و large و medium این حالات رو کنترل کرد , به مثال های زیر دقت کنید :

مثال اول : استفاده از کلاس large و medium (پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید))

در مثال بالا وقتی که صفحه کوچکتر از ۷۲۰ پیکسل بشه ستون ها تمام صفحه میشن یا برابر با ۱۲ ستون میشن! دقت کنید که جمع ستون های استفاده شده باید برابر با ۱۲ بشه! اگه کمتر بشه بین ستون ها امکان داره فاصله بیوفته و اگه بیشتر باشه از عرض صفحه میزنه بیرون. دوستان عزیز در مثال بالا به ردیف خودمون کلاس expanded رو ندادم برای همین عرض ردیف محدود شده به ماکزیمم سایزی که در فریمورک در نظر گرفته

مثال دوم : استفاده از کلاس large و small (پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید) و اندازه مرورگر خودتون رو کوچیک و بزرگ کنید و با حالت قبل مقایسه کنید)

حالت سوم : استفاده از کلاس large و medium و small (پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید) با حالت های قبل مقایسه کنید)

حالت چهارم : استفاده از کلاس medium و small (پیش نمایش رو میتونید از اینجا ببینید(کلیک کنید))

همچنین هرکدوم از کلاس ها رو به صورت تنها هم میشه استفاده کرد ولی دقت کنید در حالتی که تنها از یک کلاس استفاده میکنید  کلاس large بر روی ۱۰۲۴ پیکسل به بالا اعمال میشه , کلاس medium بر روی ۷۲۰ به بالا و کلاس small بر روی همه ی صفحه ها اعمال میشه. همچنین وقتی که از کلاسی استفاده میکنید و ناحیه ای درون بازه ی مورد نظر نیست ستون ها به صورت تمام صفحه میشن! مثلا در مثال زیر اگه سایز صفحه کمتر از ۷۲۰ پیکسل بشه ستون ها تمام صفحه میشن.

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

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

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

نمونه قالب ساده ی ساخته شده با فاندیشن
11.7 KiB
24 Downloads
اطلاعات بیشتر
به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK
  1. فوق العاده بود ولی خواهشا قسمت های بعدی رو کامل کنید.من خودم سایت دارم و میدونم خوندن و نظر ندادن بد دردیه!
    موفق باشید.

می‌خواهید دیدگاهتان را بیان کنید؟