فرم در Bootstrap ورژن 4

تنظیمات پیشفرض در bootstrap ورژن 4

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

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

 

چارچوب فرم بوت استرپ 4

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

 

  • شکل کامل (عرض)
  • فرم درونی

فرم
 <form 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="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 
مشاهده مثال

بوت استرپ 4 فرم پشته

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

 

فرم بوت استرپ Inline

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

توجه: این فقط برای فرمها در نمایهای نمایش داده شده که حداقل 576 پیکسل عرض دارند. در صفحات کوچکتر از 576 پیکسل، آن را به طور افقی بچرخانید.

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

به کلاس <form> اضافه کنید

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

فرم داخلی
 <form class="form-inline" action="/action_page.php">
  <label for="email">Email address:</label>
  <input type="email" class="form-control" id="email">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd">
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form> 
مشاهده مثال

نظر شما

مقالات و دروس

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

   
   
عضویت
پیام تستی برای گروه نرم افزاری وب مهراز