سبد (0)

تبلیغات

آموزش foundation-حالت medium

مثال های شبکه بندی در فریم ورک foundation در حالت medium

در مقاله ی قبلی، ما مثالی را از شبکه بندی، برای دستگاه های small ارائه دادیم. درواقع ما از دو عنصر div (بعنوان ستون) استفاده کردیم و نسبت 25%/75% را به آنها اختصاص دادیم:

<div class="small-3 columns">....</div>
<div class="small-9 columns">....</div>

اما در دستگاه هابا اندازه ی medium، کار با نسبت 50%/50% برای طراحی مناسب تر است. 

نکته: دستگاه های medium به دسته ای از دستگاه ها اطلاق می شود که دارای اندازه ی صفحه نمایش از 40.0625em تا 64.0624em  هستند. 

برای دستگاه های medium، ما از کلاس های *-medium. استفاده می کنیم.

اکنون ما عرض ستون ها را برای دستگاه های medium اضافه می کنیم:

<div class="small-3 medium-6 columns">....</div>
<div class="small-9 medium-6 columns">....</div>

توضیح مثال

همان طور که مشاهده می کنید، ما برای دستگاه های small از نسبت 25%/75% استفاده کرده ایم(کلاس های small-3. و small-9. ).اما برای دستگاه های medium ما از نسبت 50%/50% استفاده می کنیم(کلاس های medium-6. و medium-6.). برای دیدن تاثیر، مرورگر خود را تغییر اندازه دهید:

مثال

<div class="row">
  <div class="small-3 medium-6 columns" style="background-color:yellow;">
    <p>Lorem ipsum..</p>
  </div>
  <div class="small-9 medium-6 columns" style="background-color:pink;">
    <p>Lorem ipsum..</p>
  </div>
</div>

نتیجه:

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

نکته: توجه کنید که جمع اعداد کلاس های یک حالت، باید برابر با 12 باشد. 


تنها استفاده از حالت medium

در مثال زیر، ما تنها از کلاس medium-6. استفاده می کنیم ( بدون کلاس های *-small.). این بدین معنی است که در دستگاه های medium و large از نسبت 50%/50% استفاده شده است(به دلیل پیمایش). اما در دستگاه های small عمل انباشته شدن به صورت افقی انجام می شود( عرض 100%): 

مثال

<div class="row">
  <div class="medium-6 columns" style="background-color:yellow;">
    <p>Lorem ipsum..</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>Lorem ipsum..</p>
  </div>
</div>

نتیجه:

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

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

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