سبد خرید (0)

تبلیغات

آموزش 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>
خودتان امتحان کنید »
Note

نکته: اعداد قرار گرفته در کنار کلاس های *-small|medium|large مشخص می کنند که عنصر div به اندازه ی چند ستون باید گسترده شود(تا 12 ستون). 

بنابراین کلاس small-1. به اندازه ی یک ستون، و کلاس small-4. به اندازه ی 4 ستون و کلاس small-6. به اندازه ی 6 ستون گسترده می شود . 

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