全面解析Bootstrap表單使用方法(表單控件狀態(tài))
一、焦點狀態(tài)
焦點狀態(tài)是通過偽類“:focus”來實現(xiàn)。Bootstrap框架中表單控件的焦點狀態(tài)刪除了outline的默認樣式,重新添加陰影效果。
<form role="form" class="form-horizontal"> <div class="form-group"> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="不是焦點狀態(tài)下效果"> </div> <div class="col-xs-6"> <input class="form-control input-lg" type="text" placeholder="焦點點狀態(tài)下效果"> </div> </div> </form>
二、禁用狀態(tài)
Bootstrap框架的表單控件的禁用狀態(tài)和普通的表單禁用狀態(tài)實現(xiàn)方法是一樣的,在相應(yīng)的表單控件上添加屬性“disabled”。
<form role="form"> <input class="form-control input-lg" id="disabledInput" type="text" placeholder="表單已被禁用,不可輸入" disabled> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput">禁用的輸入框</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> <div class="form-group"> <label for="disabledSelect">禁用的下拉框</label> <select id="disabledSelect" class="form-control"> <option>不可選擇</option> </select> </div> <div class="checkbox"> <label> <input type="checkbox"> 無法選擇 </label> </div> <button type="submit" class="btn btn-primary">提交</button> </fieldset> </form>
三、驗證狀態(tài)
在制作表單時,不免要做表單驗證。同樣也需要提供驗證狀態(tài)樣式,在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)(黃色)
2、.has-error:錯誤狀態(tài)(紅色)
3、.has-success:成功狀態(tài)(綠色)
使用的時候只需要在form-group容器上對應(yīng)添加狀態(tài)類名
<form role="form"> <div class="form-group has-success"> <label class="control-label" for="inputSuccess1">成功狀態(tài)</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" > </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">警告狀態(tài)</label> <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">錯誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態(tài)"> </div> </form>
如果大家還想深入學(xué)習(xí),可以點擊這里進行學(xué)習(xí),再為大家附兩個精彩的專題:Bootstrap學(xué)習(xí)教程 Bootstrap實戰(zhàn)教程
以上就是針對Bootstrap表單控件狀態(tài)的詳細介紹,之后還有更多內(nèi)容會不斷更新,希望大家繼續(xù)關(guān)注。
相關(guān)文章
JS?解決Cannot?set?properties?of?undefined的問題
遇到這樣問題當前的是當前對象或者數(shù)組是undefined,但是卻用來引用屬性或者索引,遇到這樣的問題如何解決呢,下面通過本文給大家介紹JS?如何解決Cannot?set?properties?of?undefined,需要的朋友可以參考下2024-01-01