با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش Bootstrap 3 را دنبال می کنند.تاکنون شما را با input های ساده و اصلی در bootstrap 3 آشنا کرده ایم. علاوه بر ورودی های اصلی و پایه در bootstrap 3، طرح های پیشرفته تر و پیچیده تری از عناصر input در bootstrap 3 ، ارائه شده است. که این طرح ها برای موارد گوناگونی از جمله ایجاد نوار جستجو ، اعتبار سنجی ورودی ها و… کاربرد دارد. در ادامه ی این مباحث شما را با ورودی های Input پیشرفته در bootstrap 3 آشنا خواهیم کرد.
اگر می خواهید که یک متن ساده را بعد از یک برچسب در یک فرم horizontal (افقی) وارد کنید. از کلاس .form-control-static
در یک تگ <p>
استفاده کنید.
مثال:
1 2 3 4 5 6 7 8 | <form class="form-horizontal"> <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"> <p class="form-control-static">someone@example.com</p> </div> </div> </form> |
از کلاس .input-group
یک container برای ایجاد کنترل های ورودی با یک آیکون یا عناصر button و یک متن کمکی “help text” استفاده می شود.
از کلاس .input-group-addon
برای افزودن یک آیکون یا متن کمکی به فیلد input استفاده می شود.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <form> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> <input id="email" type="text" class="form-control" name="email" placeholder="Email"> </div> <div class="input-group"> <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span> <input id="password" type="password" class="form-control" name="password" placeholder="Password"> </div> <div class="input-group"> <span class="input-group-addon">Text</span> <input id="msg" type="text" class="form-control" name="msg" placeholder="Additional Info"> </div> </form> |
از کلاس .input-group-btn
برای یک button بعد از یک فیلد text استفاده می شود. این ویژگی اغلب برای ایجاد یک نوار search استفاده می شود.
مثال:
1 2 3 4 5 6 7 8 9 10 | <form> <div class="input-group"> <input type="text" class="form-control" placeholder="Search"> <div class="input-group-btn"> <button class="btn btn-default" type="submit"> <i class="glyphicon glyphicon-search"></i> </button> </div> </div> </form> |
disabled
می توان یک فیلد را غیر فعال می کند.disabled
تمام کنترل های فیلد ورودی را غیر فعال می کند.readonly
از ورود یا ویرایش اطلاعات توسط کاربر جلوگیری می کند..has-warning
, .has-error
یا.has-success
برای اعتبار سنجی ورودی کاربر است..has-feedback
می توانید یک آیکون بازخورد اضافه کرد..sr-only
باعث عدم نمایش برچسب (Label) ها می شود.مثال زیر چگونگی استفاده از وضعیت های فوق را در فیلدهای ورودی یک فرم Horizontal نشان می دهد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Focused</label> <div class="col-sm-10"> <input class="form-control" id="focusedInput" type="text" value="Click to focus"> </div> </div> <div class="form-group"> <label for="disabledInput" class="col-sm-2 control-label">Disabled</label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" disabled> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">Fieldset disabled</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label"></label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>Disabled select</option> </select> </div> </div> </fieldset> <div class="form-group has-success has-feedback"> <label class="col-sm-2 control-label" for="inputSuccess"> Input with success and icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputSuccess"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> </div> <div class="form-group has-warning has-feedback"> <label class="col-sm-2 control-label" for="inputWarning"> Input with warning and icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputWarning"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> </div> <div class="form-group has-error has-feedback"> <label class="col-sm-2 control-label" for="inputError"> Input with error and icon</label> <div class="col-sm-10"> <input type="text" class="form-control" id="inputError"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </div> </form> |
با افزودن تغییراتی در مثال فوق، یک فرم Inline در مثال زیر ایجاد می کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <form class="form-inline"> <div class="form-group"> <label for="focusedInput">Focused</label> <input class="form-control" id="focusedInput" type="text"> </div> <div class="form-group"> <label for="inputPassword">Disabled</label> <input class="form-control" id="disabledInput" type="text" disabled> </div> <div class="form-group has-success has-feedback"> <label for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group has-warning has-feedback"> <label for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2"> <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> </div> <div class="form-group has-error has-feedback"> <label for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form> |
در مباحث فوق که به نوعی در تکمیل مباحث بخش قبل، ارائه گردید. شما را با انواع ورودی های Input پیشرفته در bootstrap 3 آشنا کردیم. امیدواریم که از مباحث بخوبی استفاده کرده باشید.