Info@Afragraphic.ir
0912 22 460 22
خدمات و مطالب آموزشی

آموزش 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>
اجرای کد بالا به صورت زیر می باشد

6358197142480006891.png

 

 

 

 

 

 

ایجاد یک فرم به صورت خطی 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>

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

 6358197148804668642.png

 

 

ایجاد یک فرم به صورت افقی 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>

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

 

6358197151872444113.png

 

 

 

 

 

 

 

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

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

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

نظــرات شما

نام :
وب سایت :
ایمیل :
پیغام :  

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