سبد (0)

فرم ها در بوت استرپ

تنظیمات پیش فرض بوتسترپ

Wiki

هنگام استفاده از بوتسترپ، تنظیمات فرم ها(form controls) به طور اتوماتیک، یک سری از تنظیمات استایل عمومی را از بوتسترپ دریافت می کنند:

هنگام استفاده از بوت استرپ، فرم ها به طور اتوماتیک یک سری استایل را از بوت استرپ دریافت می کنند بعنوان مثال، تمام عناصر متنی، از قبیل <input> و <textarea> و  <select>، وقتی که از کلاس form-control. استفاده می کنند، دارای عرضی برابر با %100 خواهند بود.


انواع فرم ها در بوت استرپ

Wiki

بوت استرپ، سه نوع فرم را ارائه می دهد:

  • فرم عمودی(پیش فرض)
  • فرم افقی
  • فرم درون خطی

قواعد استاندارد برای هر سه طرح بندی فرم که باید آنها را رعایت کنید:

  • همواره از <form role="form"> استفاده کنید(این کاردسترسی کسانی که از screen reader استفاده می کنند را بهتر می کند).
  • برچسب ها(label) و فرم ها را درون یک <div class="form-group"> بسته بندی کنید.
  • کلاس form-control. را به تمام عناصر <input> و <textarea>  و <select> اضافه کنید.

فرم عمودی بوت استرپ(پیش فرض)

Wiki

مثال زیر یک فرم عمودی را به همراه دو فیلد ورودی و یک چک باکس و یک دکمه ی submit، ایجاد می کند:

مثال (فرم های بوت استرپ)

<form role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

فرم های درون خطی بوت استرپ

Wiki

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

نکته: ویژگی ذکر شده، تنها برای فرم هایی که دارای میدان دید با عرض حداقل 768 پیکسل می باشند اعمال خواهد شد.

قواعد اضافی برای ایجاد یک فرم درون خطی:

  •  کلاس form-inline. را به عنصر <form> اضافه کنید.

مثال زیر، یک فرم درون خطی را به همراه دو فیلد ورودی  و یک چک باکس و یک دکمه ی submit ارائه می دهد:

مثال (فرم های بوت استرپ)

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

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

مثال (فرم های بوت استرپ)

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

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

فرم افقی بوت استرپ

Wiki

یک فرم افقی از دیگر فرم ها متمایز می باشد، هم از نظر مقدار کدها و هم از نظر ارائه ی فرم مورد نظر.

قواعد اضافی برای یک فرم افقی:

  • کلاس form-horizontal. را به عنصر <form> اضافه کنید.
  • کلاس control-label. را به تمام عناصر <label> اضافه کنید.

نکته: می توانید از کلاس های شبکه بندی از پیش تعریف شده ی بوتسترپ برای تراز کردن برچسب ها و فرم ها در حالت افقی استفاده کنید.

در مثال زیر یک فرم افقی را به همراه دو فیلد ورودی و یک چک باکس و یک دکمه ی submit ایجاد می کنیم:

مثال (فرم های بوت استرپ)

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

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

 

آموزش صوتی Bootstrap

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

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

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