آموزش foundation-مثال ها

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

سه ستون مساوی

این مثال نشان می دهد که چطور سه ستون مساوی(33.3%/33.3%/33.3%) را ایجاد کنیم به طوری که از دستگاه های medium تا دستگاه های large پیمایش کند. اما در موبایل ها، ستون ها به طور اتوماتیک دسته بندی می شود و به صورت توده ای در می آیند:

سه ستون نا مساوی

این مثال نشان می دهد که چطور سه ستون با عرض متفاوت(25%/50%/25%) را ایجاد کنیم به طوری که از تبلت ها تا دستگاه های بزرگ، پیمایش کند. در موبایل ها، ستون ها به طور اتوماتیک دسته بندی می شوند:

دو ستون مساوی

این مثال نشان می دهد که چطور دو ستون مساوی را برای تمام دستگاه ها ایجاد کنیم(یعنی استفاده از نسبت 50%/50% برای موبایل ها و تبلت ها و لپ تاپ ها و رایانه های رومیزی):

دو ستون نامساوی

این مثال نشان می دهد که چطور دو ستون با عرض نامساوی را در تمام دستگاه ها ایجاد کنیم( یعنی استفاده از نسبت 66.6%/33.3% برای موبایل ها و تبلت ها و لپ تاپ ها و رایانه های رومیزی): 

 تغییر دادن ترتیب ستون ها- push و pull

با استفاده از کلاس های *-small|medium|large-push. و *-small|medium|large-pull. می توانید ترتیب ستون های شبکه بندی را تغییر دهید:

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

شما می توانید شبکه بندی های تو در تو ایجاد کنید( ستون های درون دیگر ستون ها):

ترکیب موبایل و لپ تاپ

سیستم شبکه بندی foundation دارای سه مجموعه کلاس می باشد که عبارتند از: *-small. (برای موبایل ها) و *-medium. ( برای تبلت ها) و *-large. (برای لپ تاپ و رایانه های رومیزی). کلاس های ذکر شده می توانند با یکدیگر ترکیب شوند تا طرح بندی های داینامیک و انعطاف پذیر را ایجاد کنند. 

نکته: هر مجموعه کلاس، به سمت کلاس بالاتر پیمایش می کند، بنابراین اگر می خواهید که برای حالت small و large یک عرض یکسان تعریف کنید، تنها نیاز دارید که از کلاس *-small. استفاده کنید. 

ترکیب موبایل، تبلت و لپ تاپ

ستون های وسط چین شده

با استفاده از کلاس small-centered. می توانید ستون ها وسط چین کنید. دستگاه های medium و large حالت وسط چین را از حالت small به ارث می برند اما اگر می خواهید که وسط چین شدن را تنها برای دستگاه های large مشخص کنید، از کلاس large-centered. استفاده کنید. 

نکته: برای غیر وسط چین کردن دستگاه های large، از کلاس large-uncentered. استفاده کنید. 

ستون های انحراف دار

با استفاده از کلاس های *-large-offset. ( یا *-small-offset. ) می توانید ستون ها را به سمت راست ببرید. این کلاس ها مقدار margin از سمت چپ را برای یک ستون، به اندازه ی * ستون، افزایش می دهند:

ردیف های کامل نشده

اگر که در یک ردیف، جمع اعداد ستون ها برابر با 12 نباشد، فریم ورک foundation به طور اتوماتیک آخرین عنصر را به سمت راست شناور می کند و فضای باقی مانده را پر می کند. 

به طور اختیاری، کلاس end.  را به آخرین عنصر اضافه کنید تا عنصر به سمت چپ شناور شود:

مثال

صفحه های نمایش پهن

شبکه بندی( کلاس row.) دارای یک ماکسیمم عرض به اندازه ی 62.5rem می باشد. در صفحه های نمایش پهن، هنگامی که عرض بیشتر از 62.5rem باشد، ستون ها دیگر به اندازه ی تمام عرض صفحه، گسترده نمی شوند، حتی اگر عرض به 100% ست شده باشد. اما شما می توانید با استفاده از css یک max-width جدید تعریف کنید:

<style>
.row {
    max-width: 100%;
}
</style>

اگر که شما در max-width پیش فرض استفاده می کنید اما می خواهید که یک رنگ پس زمینه به اندازه ی عرض تمام صفحه، ایجاد شود، یک عنصر ظرف (مانند div) را به دور عنصر شامل row. قرار دهید و سپس رنگ پس زمینه را مشخص کنید:

• قبلی