平常在制作表單驗證時，要提供不同的提示信息。在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，并且顯示在控件底部。
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
<span class="help-block">你輸入的信息是正確的</span>
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
…
</form>
運行效果如下或查看右側(cè)結(jié)果窗口：
具體樣式代碼請查看bootstrap.css文件第1922行～第1927行：
.help-block {
display: block;
margin-top: 5px;
margin-bottom: 10px;
color: #737373;
}
在Bootstrap V2.x版本中還提供了一個行內(nèi)提示信息，其使用了類名“help-inline”。一般讓提示信息顯示在控件的后面，也就是同一水平顯示。如果你想在BootstrapV3.x版本也有這樣的效果，你可以添加這段代碼：
.help-inline{
display:inline-block;
padding-left:5px;
color: #737373;
}
如果你不想為bootstrap.css增加自己的代碼，而且設(shè)計又有這種樣的需求，那么只能借助于Bootstrap的網(wǎng)格系統(tǒng)。(網(wǎng)格系統(tǒng)在后面的章節(jié)中會詳細講解)
<form role="form"> <div class="form-group"> <label class="control-label" for="inputSuccess1">成功狀態(tài)</label> <div class="row"> <div class="col-xs-6"> <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" > </div> <span class="col-xs-6 help-block">你輸入的信息是正確的</span> </div> </div> </form>
運行效果如下或查看右側(cè)結(jié)果窗口：
結(jié)束語：有關(guān)于Bootstrap框架中表單的運用除了按鈕部分，到此就算是介紹完了。如果你覺得這樣的表單效果并不是你需要的，你完全可以通過forms.less或者_forms.scss文件進行定制，然后重新編譯就可以得到你需要的表單效果。在接下來的一節(jié)中，我們Bootstrap框架中另一個核心內(nèi)容——按鈕。
我來試試：完成下面任務(wù)
在代碼編輯器的第26行補充代碼，為25行的輸入框提示“你輸入的信息是錯誤的”的信息。
參考代碼如下：
<span class="help-block">你輸入的信息是錯誤的</span>
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報