|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد

ورود به حساب کاربری

در صورتی که کلمه عبور خود را بروزرسانی کرده اید با کلمه عبور وارد حساب کاربری خود شوید.

شماره همراه خود را وارد کنید

ورود و ادامه

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

نظر شما

>

مقالات و دروس

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

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

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

مقالات مرتبط

|||

ورود به حساب کاربری

شماره همراه خود را وارد کنید

ورود با کلمه عبور ارسال کد تایید

فراموشی کلمه عبور

در صورت فراموشی کلمه عبور شماره موبایل خود را وارد کنید.

ورود با کلمه عبور تنظیم مجدد