سبد خرید (0)

تبلیغات

آموزش foundation-مثال ها

در زیر، ما تعدادی مثال را در زمینه ی طرح بندی های پایه ی شبکه بندی از فریم ورک foundation را گرد آوری کرده ایم. 


سه ستون مساوی

این مثال نشان می دهد که چطور سه ستون مساوی(33.3%/33.3%/33.3%) را ایجاد کنیم به طوری که از دستگاه های medium تا دستگاه های large پیمایش کند. اما در موبایل ها، ستون ها به طور اتوماتیک دسته بندی می شود و به صورت توده ای در می آیند:

مثال

<div class="row">
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:pink;">
    <p>.medium-4</p>
  </div>
  <div class="medium-4 columns" style="background-color:yellow;">
    <p>.medium-4</p>
  </div>
</div>
خودتان امتحان کنید »

سه ستون نا مساوی

این مثال نشان می دهد که چطور سه ستون با عرض متفاوت(25%/50%/25%) را ایجاد کنیم به طوری که از تبلت ها تا دستگاه های بزرگ، پیمایش کند. در موبایل ها، ستون ها به طور اتوماتیک دسته بندی می شوند:

مثال

<div class="row">
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
  <div class="medium-6 columns" style="background-color:pink;">
    <p>.medium-6</p>
  </div>
  <div class="medium-3 columns" style="background-color:yellow;">
    <p>.medium-3</p>
  </div>
</div>
خودتان امتحان کنید »

دو ستون مساوی

این مثال نشان می دهد که چطور دو ستون مساوی را برای تمام دستگاه ها ایجاد کنیم(یعنی استفاده از نسبت 50%/50% برای موبایل ها و تبلت ها و لپ تاپ ها و رایانه های رومیزی):

مثال

<div class="row">
  <div class="small-6 columns" style="background-color:yellow;">
    <p>.small-6</p>
  </div>
  <div class="small-6 columns" style="background-color:pink;">
    <p>.small-6</p>
  </div>
</div>
خودتان امتحان کنید »

دو ستون نامساوی

این مثال نشان می دهد که چطور دو ستون با عرض نامساوی را در تمام دستگاه ها ایجاد کنیم( یعنی استفاده از نسبت 66.6%/33.3% برای موبایل ها و تبلت ها و لپ تاپ ها و رایانه های رومیزی): 

مثال

<div class="row">
  <div class="small-8 columns" style="background-color:yellow;">
    <p>.small-8</p>
  </div>
  <div class="small-4 columns" style="background-color:pink;">
    <p>.small-4</p>
  </div>
</div>
خودتان امتحان کنید »

 تغییر دادن ترتیب ستون ها- push و pull

با استفاده از کلاس های *-small|medium|large-push. و *-small|medium|large-pull. می توانید ترتیب ستون های شبکه بندی را تغییر دهید:

مثال

<div class="row">
  <div class="small-4 small-8-push columns" style="background-color:yellow;">
    <p>.small-4 .small-8-push</p>
  </div>
  <div class="small-8 small-4-pull columns" style="background-color:pink;">
    <p>.small-8 .small-4-pull</p>
  </div>
</div>
خودتان امتحان کنید »

ستون های تو در تو

شما می توانید شبکه بندی های تو در تو ایجاد کنید( ستون های درون دیگر ستون ها):

مثال

<div class="row">
  <div class="small-8 columns">.small-8
    <div class="row">
      <div class="small-8 columns">.small-8 Nested
        <div class="row">
          <div class="small-8 columns">.small-8 Nested Again</div>
          <div class="small-4 columns">.small-4</div>
        </div>
      </div>
      <div class="small-4 columns">.small-4</div>
    </div>
  </div>
  <div class="small-4 columns">.small-4</div>
</div>
خودتان امتحان کنید »

ترکیب موبایل و لپ تاپ

سیستم شبکه بندی foundation دارای سه مجموعه کلاس می باشد که عبارتند از: *-small. (برای موبایل ها) و *-medium. ( برای تبلت ها) و *-large. (برای لپ تاپ و رایانه های رومیزی). کلاس های ذکر شده می توانند با یکدیگر ترکیب شوند تا طرح بندی های داینامیک و انعطاف پذیر را ایجاد کنند. 

نکته: هر مجموعه کلاس، به سمت کلاس بالاتر پیمایش می کند، بنابراین اگر می خواهید که برای حالت small و large یک عرض یکسان تعریف کنید، تنها نیاز دارید که از کلاس *-small. استفاده کنید. 

مثال

<div class="row">
  <div class="small-6 large-8 columns">.small-6 .large-8</div>
  <div class="small-6 large-4 columns">.small-6 .large-4</div>
</div>
<div class="row">
  <div class="small-2 large-4 columns">.small-2 .large-2</div>
  <div class="small-4 large-4 columns">.small-4 .large-2</div>
  <div class="small-6 large-4 columns">.small-6 .large-2</div>
</div>
<div class="row">
  <div class="small-3 large-5 columns">.small-3 .large-5</div>
  <div class="small-9 large-7 columns">.small-9 .large-7</div>
</div>
خودتان امتحان کنید »

ترکیب موبایل، تبلت و لپ تاپ

مثال

<div class="row">
  <div class="medium-6 large-8 columns">.medium-6 .large-8</div>
  <div class="medium-6 large-4 columns">.medium-6 .large-4</div>
</div>
<div class="row">
  <div class="small-4 medium-3 large-7 columns">.small-4 .medium-3 .large-7</div>
  <div class="small-4 medium-6 large-3 columns">.small-4 .medium-6 .large-3</div>
  <div class="small-4 medium-3 large-2 columns">.small-4 .medium-3 .large-2</div>
</div>
خودتان امتحان کنید »

ستون های وسط چین شده

با استفاده از کلاس small-centered. می توانید ستون ها وسط چین کنید. دستگاه های medium و large حالت وسط چین را از حالت small به ارث می برند اما اگر می خواهید که وسط چین شدن را تنها برای دستگاه های large مشخص کنید، از کلاس large-centered. استفاده کنید. 

نکته: برای غیر وسط چین کردن دستگاه های large، از کلاس large-uncentered. استفاده کنید. 

مثال

<div class="row">
  <div class="small-4 small-centered columns">small-4 small-centered</div>
</div>
<div class="row">
  <div class="small-6 small-centered columns">small-6 small-centered</div>
</div>
<div class="row">
  <div class="small-6 large-centered columns">small-6 large-centered</div>
</div>
<div class="row">
  <div class="small-8 small-centered large-uncentered columns">small-8 small-centered large-uncentered</div>
</div>
<div class="row">
  <div class="small-10 small-centered columns">small-10 small-centered</div>
</div>
خودتان امتحان کنید »

ستون های انحراف دار

با استفاده از کلاس های *-large-offset. ( یا *-small-offset. ) می توانید ستون ها را به سمت راست ببرید. این کلاس ها مقدار margin از سمت چپ را برای یک ستون، به اندازه ی * ستون، افزایش می دهند:

مثال

<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-11 columns">11</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
  <div class="large-1 columns">1</div>
  <div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
خودتان امتحان کنید »

ردیف های کامل نشده

اگر که در یک ردیف، جمع اعداد ستون ها برابر با 12 نباشد، فریم ورک foundation به طور اتوماتیک آخرین عنصر را به سمت راست شناور می کند و فضای باقی مانده را پر می کند. 

به طور اختیاری، کلاس end.  را به آخرین عنصر اضافه کنید تا عنصر به سمت چپ شناور شود:

مثال

<div class="row">
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
</div>
<div class="row">
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns">.medium-3</div>
  <div class="medium-3 columns end">.medium-3 .end</div>
</div>
خودتان امتحان کنید »

صفحه های نمایش پهن

شبکه بندی( کلاس row.) دارای یک ماکسیمم عرض به اندازه ی 62.5rem می باشد. در صفحه های نمایش پهن، هنگامی که عرض بیشتر از 62.5rem باشد، ستون ها دیگر به اندازه ی تمام عرض صفحه، گسترده نمی شوند، حتی اگر عرض به 100% ست شده باشد. اما شما می توانید با استفاده از css یک max-width جدید تعریف کنید:

مثال (آموزش foundation-مثال ها)

<style>
.row {
    max-width: 100%;
}
</style>
خودتان امتحان کنید »

اگر که شما در max-width پیش فرض استفاده می کنید اما می خواهید که یک رنگ پس زمینه به اندازه ی عرض تمام صفحه، ایجاد شود، یک عنصر ظرف (مانند div) را به دور عنصر شامل row. قرار دهید و سپس رنگ پس زمینه را مشخص کنید:

مثال

<div style="background-color:coral;padding:25px;">
  <div class="row">
    <div class="small-6 columns" style="background-color:yellow;">.small-6</div>
    <div class="small-6 columns" style="background-color:pink;">.small-6</div>
  </div>
</div>
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان