سبد (0)

تبلیغات

آموزش foundation-سیستم شبکه بندی

سیستم شبکه بندی فریم ورک foundation

سیستم شبکه بندی فریم ورک foundation تا 12 ستون در یک صفحه را ارائه می دهد. 

اگر که نمی خواهید از کل 12 ستون به طور جداگانه استفاده کنید، می توانید ستون ها را با یکدیگر ادغام کنید تا ستون های پهن تری به دست بیایند:

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

کلاس های شبکه بندی

سیستم شبکه بندی foundation دارای سه کلاس می باشد:

  • small (برای موبایل ها)
  • medium (برای تبلت ها)
  • large (برای لپ تاپ و رایانه های رومیزی)

کلاس های بالا را می توان با یکدیگر ترکیب کرد تا طرح بندی های داینامیک و انعطاف پذیر را ایجاد نمود.

نکته: هر کلاس، به سمت کلاس بزرگتر از خود پیمایش می کند. بنابراین اگر می خواهید که یک عرض یکسان را برای کلاس های medium. و یا large. تعریف کنید، فقط کافی است که از کلاس medium. استفاده کنید. 


یک ساختار پایه از سیستم شبکه بندی foundation

کد زیر، یک ساختار پایه از شبکه بندی foundation را نشان می دهد: 

<div class="row">
  <div class="small|medium|large-num columns"></div>
</div>
<div class="row">
  <div class="small|medium|large-num columns"></div>
  <div class="small|medium|large-num columns"></div>
  <div class="small|medium|large-num columns"></div>
</div>
<div class="row">
  ...
</div>

ابتدا یک ردیف ایجاد کنید(<"div class="row>). این باعث می شود که یک قطعه ی افقی از ستون های عمودی مشخص شود. سپس در کلاس های small-num و medium-num و یا large-num به جای مقدار num یک عدد دلخواه را قرار دهید. توجه داشته باشید که در هر ردیف، جمع مقادیر num برای هر کلاس استفاده شده باید برابر با 12 باشد:

مثال

<div class="row">
  <div class="small-12 columns">.small-12 yellow</div>
</div>
<div class="row">
  <div class="small-8 columns">.small-8 beige</div>
  <div class="small-4 columns">.small-4 gray</div>
</div>
<div class="row">
  <div class="large-9 small-8 columns">.small-8 .large-9 pink</div>
  <div class="large-3 small-4 columns">.small-4 .large-3 orange</div>
</div>

نتیجه:

خودتان امتحان کنید »

بنابراین برای اولین ردیف در مثال بالا، یک عنصر <div> با کلاس small-12. قرار دارد. این کلاس باعث می شود که تمام 12 ستون صفحه برای این ردیف اشغال شود(100% عرض صفحه). 

ردیف بعدی، دو ستون را مشخص می کند. فریم ورک foundation این دو ستون را در کنار یکدیگر قرار می دهد . به طوری که کلاس small-4. مقدار %33.3 از عرض را اشغال می کند و کلاس small-8. مقدار %66.6 از عرض صفحه را اشغال می کند.

در ردیف سوم، علاوه بر کلاس های ردیف دوم، یک کلاس دیگر را نیز به هر ستون اضافه کرده ایم(که عبارتد از large-3. و large-9.). این بدین معنی است که هنگامی که صفحه، در یک صفحه ی نمایش بزرگ نمایش داده می شود، یکی از ستون ها باید %25 (کلاس large-3.) و ستون دیگری باید %75 (کلاس large-9.) از صفحه را اشغال کند. و هنگامی که صفحه در یک صفحه ی نمایش کوچک و یا متوسط(به دلیل پیمایش کلاس small) نمایش داده می شود، یکی از ستون ها %33(small-4.) و ستون دیگر %66 (small-8.)از صفحه را اشغال می کند. این ویژگی ها، برای تنظیم کردن اندازه ی صفحه، برای دستگاه ها با صفحه های نمایش مختلف، مناسب می باشد. 


گزینه های شبکه بندی

جدول زیر، به طور خلاصه نشان می دهد که سیستم شبکه بندی foundation چطور در دستگاه های مختلف کار می کند:

 دستگاه های small
Phones (<40.0625em (640px))
دستگاه های Medium
Tablets (>=40.0625em (640px))
دستگاه های Large
Laptops & Desktops (>=64.0625em (1025px))
رفتار شبکه بندی همواره به صورت افقی

Collapsed to start, horizontal above breakpoints

Collapsed to start, horizontal above breakpoints
پیشوند کلاس .small-* .medium-* .large-*
تعداد ستون ها 12 12 12
قابلیت تو در تو بودن Yes Yes Yes
Offsets Yes Yes Yes
مرتب سازی ستون ها Yes Yes Yes

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

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

مثال

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

پیش فرض:

max-width: 100% :

خودتان امتحان کنید »

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

مثال

<div style="background-color:coral;padding:25px;">
  <div class="row">
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
  </div>
</div>

پیش فرض:

به همراه ظرف:

خودتان امتحان کنید »

مثال ها

در مقاله ی بعدی مثال هایی از شبکه بندی برای صفحه های نمایش مختلف آورده شده است:

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