021-28423015
021-28423015

فرم در 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> 
مشاهده مثال


نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

عضویت در خبرنامه شرکت نرم افزاری وب مهراز

برای اطلاع از بسته ها ، تخفیف های استثنایی و تازه های ما به خبرنامه وب مهراز بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط