ساخت Form بوت استرپ

کنترل های فرم به طور خودکار یک ظاهر Global را با بوت استرپ دریافت می کنند:

تمام متن ، و عناصر <select> با کلاس .form-control دارای عرض 100٪ می باشند.

مقالات

چیدمان فرم بوت استرپ Bootstrap Form Layouts

بوت استرپ سه نوع طرح بندی فرم ارائه می دهد:
فرم عمودی Vertical form (این پیش فرض است)
فرم افقی Horizontal form
فرم درونی Inline form
قوانین استاندارد برای هر سه طرح بندی فرم:

قرار دادن برچسب ها و فرم های کنترل در <div class = “form-group”> (برای فاصله مطلوب لازم است)
اضافه کردن کلاس .form-control به همه متن <input>، <textarea> و عناصر <select>

فرم عمودی vertical بوت استرپ

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

مثال

فرم درون خطی بوت استرپ Bootstrap Inline Form

در شکل خطی، تمام عناصر inline, left-aligned و label ها در کنار یکدیگر قرار دارند.

نکته: این فقط برای فرمها در نمایهای نمایش داده می شود که حداقل 768 پیکسل دارند!

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

اضافه کردن کلاس .form-inline به عنصر <form>
مثال زیر یک خط درونی با دو فیلد ورودی ایجاد می کند، یک چک باکس و یک دکمه ارسال:

مثال:

<form class="form-inline" action="/action_page.php">
  <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>

<label for="email">Email address:</label>

</div>

<label for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

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

مثال

<form class="form-inline" action="/action_page.php">
  <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>

<label class="sr-only" for="email">Email address:</label>

</div>

<label class="sr-only" for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

فرم افقی بوت استرپ Bootstrap Horizontal Form

یک فرم افقی به این معنی است که label ها در کنار میدان ورودی (افقی) در صفحه های بزرگ و متوسط هم تراز شده اند. در صفحات کوچک (767 پیکسل و در پایین)، آن را به صورت عمودی تبدیل می کند (برچسب ها در بالای هرinput قرار می گیرند).

قوانین اضافی برای یک فرم افقی:

اضافه کردن کلاس .form-horizontal به عنصر <form>
افزودن کلاس کنترل.control-label به تمام عناصر<label>
نکته: از کلاسهای شبکه پیش تعیین شده بوت استرپ استفاده کنید تا برچسب ها و گروه های کنترل های فرم را در یک طرح افقی ترکیب کنید.

مثال زیر یک فرم افقی با دو فیلد ورودی، یک چک باکس و یک دکمه ارسال فراهم می کند.

<form class="form-horizontal" action="/action_page.php">
  <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>

<label class="control-label col-sm-2" for="email">Email:</label>

</div>

<label class="control-label col-sm-2" for="pwd">Password:</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</div>

</form>

Rate this post

ساخت Form بوت استرپ

چیدمان فرم بوت استرپ Bootstrap Form Layouts

فرم عمودی vertical بوت استرپ

فرم درون خطی بوت استرپ Bootstrap Inline Form

فرم افقی بوت استرپ Bootstrap Horizontal Form

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

چیدمان فرم بوت استرپ Bootstrap Form Layouts

فرم عمودی vertical بوت استرپ

فرم درون خطی بوت استرپ Bootstrap Inline Form

فرم افقی بوت استرپ Bootstrap Horizontal Form

مطالب زیر را حتما مطالعه کنید

افزونه و کلاس Carousel در بوت استرپ bootstrap

کلاس collapse در بوت استرپ bootstrap

کلاس jumbotron در بوت استرپ

فیلترهای بوت استرپ

افزونه Affix بوت استرپ

افزونه Scrollspy بوت استرپ

دیدگاهتان را بنویسید لغو پاسخ