آموزش foundation-انباشه یا افقی
مثالی از شبکه بندی foundation- از حالت انباشه به حالت افقی
می خواهیم یک سیستم شبکه بندی پایه ایجاد کنیم که در موبایل ها و تبلت های کوچک، به صورت انباشته در می آید و در لپ تاپ ها و رایانه های رومیزی به صورت افقی در می آید.
مثال زیر، یک طرح بندی دو ستونه را نمایش می دهد که در دستگاه های کوچک به صورت انباشه است و در دستگاه های بزرگ، به صورت افقی در می آید(مرورگر را تغییر اندازه دهید تا نتیجه را مشاهده کنید):
مثال: از حالت انباشته به حالت افقی
<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>
خودتان امتحان کنید »<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>
 |
نکته: اعداد قرار گرفته در کنار کلاس های *-small|medium|large مشخص می کنند که عنصر div به اندازه ی چند ستون باید گسترده شود(تا 12 ستون). بنابراین کلاس small-1. به اندازه ی یک ستون، و کلاس small-4. به اندازه ی 4 ستون و کلاس small-6. به اندازه ی 6 ستون گسترده می شود . |
|---|
- نوشته شده توسط احسان عباسی
- بازدید: 3677
