فرم در Bootstrap ورژن 4
یادگیری Bootstrapتنظیمات پیشفرض در 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>
مشاهده مثال
نظر شما
>