سبد (0)

تبلیغات

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

مثال های شبکه بندی در فریم ورک foundation: حالت small

فرض کنید که ما یک طرح بندی داریم که دارای 2 ستون است. و می خواهیم که این طرح بندی در دستگاه های small به صورت 75%/25% باشد.

نکته: دستگاه های small، دستگاه هایی هستند که عرض صفحه ی نمایش آنها کمتر از 40.0625em باشد. 

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

حالا کلاس های زیر را به دو ستون اعمال کنید: 

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

مثال زیر، یک طرح بندی به صورت 75%/25% را در تمام دستگا ها نمایش می دهد(فریم ورک foundation پاسخ گرا به موبایل است: این یعنی که دستگاه های بزرگ، در صورتی که هیچ چیز برای آنها مشخص نشود، کدها را از کلاس small. به ارث می برند)

مثال

<div class="row">
  <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>

نتیجه:

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

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

برای طرح بندی به صورت 66.6%/33.3% شما باید از کلاس های small-4. و small-8. استفاده کنید:

مثال

<div class="row">
  <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 را فرا خواهید گرفت.

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