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

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>

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