平常在製作表單驗證時,要提供不同的提示資訊。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式,將提示資訊以塊狀顯示,並且顯示在控制元件底部。
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態</label> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > <span class="help-block">你輸入的資訊是正確的</span> <span class="glyphiconglyphicon-ok form-control-feedback"></span> </div> </form>
Bootstrap提供了一個行內提示資訊,其使用了類名“help-inline”。一般讓提示資訊顯示在控制元件的後面,也就是同一水平顯示。
<form role="form"> <div class="form-group"> <label class="control-label" for="inputSuccess1">成功狀態</label> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > </div> <span class="col-xs-6 help-block">你輸入的資訊是正確的</span> </div> </div> </form>