با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 4 ، را دنبال می کنند. خب در دو بخش اخیر آموزشها ، ما به مبحث بسیار مهم و گسترده ای در طراحی وب سایت ها اشاره کردیم. و موضوعات طراحی منوها و کار با Nav در ۴ Bootstrap و در ادامه آن مبحث navigation در Bootstrap 4 ، را نیز بررسی کردیم.در این بخش نیز، قصد داریم، به موضوع طراحی عناصر فرم ها در Bootstrap 4 ،بپردازیم
عناصر فرم ها نیز در Bootstrap 4 ، طراحی های متنوع و گسترد های دارند. همچنین تمام عناصر ویژگی responsive را دارند.
اکنون به سراغ موضوع اصلی این بخش ، طراحی عناصر فرم ها در Bootstrap 4 ، می رویم.
کنترل های فرم به طور خودکار یک style عمومی را با بوت استرپ دریافت می کنند:
عناصر <input> ، <textarea>
و <select>
، با کلاس .form-control
و خصوصیت عرض (width) با مقدار ۱۰۰% ، قرار می گیرند.
Bootstrap 4 دو چهار چوب را برای فرم ها ارائه کرده است:
مثال زیر یک فرم جمع شده با دو فیلد ورودی، یک چک باکس و دکمه ارسال را ایجاد می کند.
و یک عنصر <div> ، برای با کلاس .form-group
، برای گروه بندی کنترل های فرم، قرار می گیرد.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <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-group 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> |