آموزش foundation-حالت small
مثال های شبکه بندی در فریم ورک foundation: حالت small
فرض کنید که ما یک طرح بندی داریم که دارای 2 ستون است. و می خواهیم که این طرح بندی در دستگاه های small به صورت 75%/25% باشد.
نکته: دستگاه های small، دستگاه هایی هستند که عرض صفحه ی نمایش آنها کمتر از 40.0625em باشد.
برای دستگاه های کوچک، ما از کلاس های *-small. استفاده می کنیم.
حالا کلاس های زیر را به دو ستون اعمال کنید:
<div class="small-9 columns">....</div>
مثال زیر، یک طرح بندی به صورت 75%/25% را در تمام دستگا ها نمایش می دهد(فریم ورک foundation پاسخ گرا به موبایل است: این یعنی که دستگاه های بزرگ، در صورتی که هیچ چیز برای آنها مشخص نشود، کدها را از کلاس small. به ارث می برند)
مثال
<div class="small-3 columns" style="background-color:yellow;">
<p>Lorem ipsum..</p>
</div>
<div class="small-9 columns" style="background-color:pink;">
<p>Lorem ipsum..</p>
</div>
</div>
نتیجه:
 |
نکته: توجه داشته باشید که جمع اعداد داخل کلاس ها باید برابر با 12 باشد. |
|---|
برای طرح بندی به صورت 66.6%/33.3% شما باید از کلاس های small-4. و small-8. استفاده کنید:
مثال
<div class="small-4 columns" style="background-color:yellow;">
<p>Lorem ipsum..</p>
</div>
<div class="small-8 columns" style="background-color:pink;">
<p>Lorem ipsum..</p>
</div>
</div>
نتیجه:
در مقاله ی بعدی، آموزش اضافه کردن طرح بندی ها برای دستگاه های medium را فرا خواهید گرفت.
- نوشته شده توسط احسان عباسی
- بازدید: 3178
