آموزش foundation-حالت large
حالت large در سیستم شبکه بندی foundation
در مقاله ی قبلی ما یک مثال از شبکه بندی ارائه دادیم که از کلاس های small و medium در آن استفاده شده بود. درواقع ما از دو div (بعنوان ستون) استفاده کردیم و برای حالت small از نسبت 75%/25% و برای حالت medium از نسبت 50%/50% استفاده کردیم:
<div class="small-9 medium-6 columns">....</div>
اما در دستگاه ها به صفحه ی نمایش بزرگ، بهتر است از نسبت 66%/33% استفاده کنیم.
نکته: دستگاه با صفحه ی نمایش بزرگ، به دستگاه های اطلاق می شود که دارای صفحه ی نمایش به اندازه ی 64.0625em و بیشتر باشند.
برای دستگاه های large، ما از کلاس های *-large استفاده می کنیم.
حالا ما برای دستگاه های بزرگ، عرض ستون ها را به کدهای قبلی اضافه می کنیم:
<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="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>
نتیجه:
 |
نکته: دقت داشته باشیدکه جمع اعداد کلاس های یک حالت باید برابر با 12 باشد. |
|---|
تنها استفاده از حالت large
در مثال زیر ما تنها از کلاس large. استفاده کرده ایم( بدون استفاده از کلاس های *-small. یا *-medium.). این بدین معنی است که دستگاه های بزرگ، از نسبت 50%/50% استفاده می کنند اما برای دستگاه های medium و small عناصر به صورت عمودی انباشته می شوند( و عرض 100% را اشغال می کنند):
مثال
<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>
نتیجه:
- نوشته شده توسط احسان عباسی
- بازدید: 3811
