Bootstrap系列 -- 21. 表單提示資訊

賀臣發表於2015-06-25
boot

 

　　平常在製作表單驗證時，要提供不同的提示資訊。在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>

 

　　

相關文章