سبد خرید (0)

تبلیغات

آموزش foundation-اندازه ی ورودی

اندازه بندی input ها در فریم ورک foundation

 

برای اندازه گذاری input ها می توانید از کلاس های شبکه بندی استفاده کنید(مانند کلاس های large-6. یا medium-6. و ...).

 

<form>
  <div class="row">
    <div class="large-10 medium-7 columns">
      <label>large-10 medium-7 (100% on small)
        <input type="text" placeholder="Name">
      </label>
    </div>
  </div>

  <div class="row">
    <div class="small-5 columns">
      <label>small-5
        <input type="text" placeholder="Name">
      </label>
    </div>
  </div>

  <div class="row">
    <div class="medium-3 columns">
      <label>medium-3 (100% on small)
        <input type="text" placeholder="Name">
      </label>
    </div>
  </div>
</form>

نتیجه:

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

سه ستون مساوی

یک مثال از سه ستون مساوی برای ورودی ها(input): 

<form>
  <div class="row">
    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>

    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>

    <div class="medium-4 columns">
      <label>medium-4 (100% on small, stacked)
        <input type="text" placeholder="Name">
      </label>
    </div>
  </div>
</form>

نتیجه:

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

برچسب های خطی

اگر می خواهید که برچسب های شما در سمت چپ ورودی ها(به جای بالا) قرار بگیرند، بر چسب را درون یک ستون متفاوت در سمت چپ ورودی قرار دهید و سپس کلاس inline. را اضافه کنید تا برچسب به صورت عمودی نسبت به ورودی، در مرکز قرار بگیرد:

<form>
  <div class="row">
    <div class="small-8">
      <div class="row">
        <div class="small-3 columns">
          <label for="name" class="inline right">Name</label>
        </div>
        <div class="small-9 columns">
          <input type="text" id="name" placeholder="First Name..">
        </div>
      </div>
    </div>
  </div>
</form>

نتیجه:

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

برچسب های پیشوندی و پسوندی

شما می توانید با استفاده از <"div class="row collapse> برچسب های پسوندی و پیشوندی را که به خود ورودی تعلق دارند ایجاد کنید. کافی است که به دنبال عنصر ذکر شده، از <"element class="postfix> یا  <"element class="prefix>  استفاده کنید. می توانید از سیستم شبکه بندی استفاده کنید تا اندازه ی برچسب های پیشوندی/پسوندی را مشخص کنید:

<form>
  <div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">Prefix</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <span class="postfix">Postfix</span>
        </div>
      </div>
    </div>
  </div>
</form>

نتیجه:

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

دکمه های پیشوندی و پسوندی

برای اینکه برچسب های پیشوندی و پسوندی را به صورت یک دکمه در بیاورید، از یک عنصر <a> استفاده کرده و کلاس button. را به آن اضافه کنید:

<a href="#" class="postfix button">Go</a>

نتیجه:

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

برچسب های پسوندی و پیشوندی گرد شده

کلاس های prefix-radius. و postfix-radius. و prefix-round. و postfix-round. برای برچسب های پسوندی و پیشوندی، گوشه های گرد شده ایجاد می کنند: 

<form>
  <div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-radius">
        <div class="small-3 columns">
          <span class="prefix">Prefix</span>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-radius">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <span class="postfix">Postfix</span>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-6 columns">
      <div class="row collapse prefix-round">
        <div class="small-3 columns">
          <a href="#" class="button prefix">Go</a>
        </div>
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="row collapse postfix-round">
        <div class="small-9 columns">
          <input type="text" placeholder="Value">
        </div>
        <div class="small-3 columns">
          <a href="#" class="button postfix">Go</a>
        </div>
      </div>
    </div>
  </div>
</form>

نتیجه:

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