آموزش Bootstrap-- کار با فرم ها در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت هفتم آموزش در زیر قرار داده شده است.

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

برای استایل دادن به المان های <input>, <textarea>  و<select>  به شکل

بوت استرپی باید کلاس form-control.  را به المان هایمان اضافه کنیم که به صورت

width:100 % میباشد در این صورت المان های ما نیز به صورت width:100%  می شود

فرم ها در بوت استرپ به 3 صورت میباشند :

• Vertical form (this is default)
• Horizontal form
• Inline form

قرار دادن <"form role="form> به بهبود قابلیت دسترسی برای 
کاربرانی که از سایت استفاده می کنند کمک می کند

کلاس form-group. برای ایجاد فاصله های مطلوب بین 
کنترل هایمان به کار می رود

ایجاد یک فرم به صورت پیش فرض عمودی
 (Vertical form (this is default :

<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>

اجرای کد بالا به صورت زیر می باشد

ایجاد یک فرم به صورت خطی Inline form :

<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>

اجرای کد بالا به صورت زیر می باشد

 

ایجاد یک فرم به صورت افقی Horizontal form :

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>

اجرای کد بالا به صورت زیر می باشد

 ادامه آموزش در قسمت هشتم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

 پایان قسمت هفتم

منبع: http://www.w3schools.com/