平常在制作表單驗證時,要提供不同的提示信息。在框架中也提供了這樣的效果。使用了一個"help-block"樣式,將提示信息以塊狀顯示,并且顯示在控件底部。
運行效果如下或查看右側結果窗口:
具體樣式代碼請查看.css文件第1922行~第1927行:
.help-block { display: block; margin-top: 5px; margin-bottom: 10px; color: #737373; }
在 V2.x版本中還提供了一個行內提示信息,其使用了類名“help-”。一般讓提示信息顯示在控件的后面,也就是同一水平顯示。如果你想在.x版本也有這樣的效果表單驗證提示錯誤信息,你可以添加這段代碼:
.help-inline{ display:inline-block; padding-left:5px; color: #737373; }
如果你不想為.css增加自己的代碼,而且設計又有這種樣的需求,那么只能借助于的網格系統。(網格系統在后面的章節中會詳細講解)
運行效果如下或查看右側結果窗口:
結束語:有關于框架中表單的運用除了按鈕部分,到此就算是介紹完了。如果你覺得這樣的表單效果并不是你需要的表單驗證提示錯誤信息,你完全可以通過forms.less或者.scss文件進行定制,然后重新編譯就可以得到你需要的表單效果。在接下來的一節中,我們框架中另一個核心內容——按鈕。