سبد (0)

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

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

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

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

اما در دستگاه ها به صفحه ی نمایش بزرگ، بهتر است از نسبت 66%/33% استفاده کنیم. 

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

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

حالا ما برای دستگاه های بزرگ، عرض ستون ها را به کدهای قبلی اضافه می کنیم:

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

توضیح مثال

  • برای دستگاه های small از نسبت 75%/25% استفاده می کنیم (کلاس های small-3. و small-9.)
  • برای دستگاه های medium از نسبت 50%/50% استفاده می کنیم(کلاس های medium-6. و medium-6.)
  • برای دستگاه های large از نسبت 66%/33% استفاده می کنیم(کلاس های large-4. و lerge-8.)

پنجره ی مرورگر را تغییر اندازه دهید تا تاثیر را مشاهده کنید:

مثال

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

نتیجه:

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

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


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

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

مثال

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

نتیجه:

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