基本表單類樣式列表

1.基礎表單: <div class="form-group"><label for="username">username: </label><input type="text" class="form-control" name=username" /> </div>2.內聯表單: <div class="form-inline">... </div>3.水平排列表單:（這種方式下建議使用柵格系統來控制他們的排列） <div class="form-horizontal"><label for="username" class="col-lg-1">username</label><div class="col-lg-3"><input type="text" class="form-control" name="username" /></div> </div>

單選框和多選框樣式

建議：每次定義單選框樣式最好將每個選項都放在單獨的label中

1,普通單選框 <div class="radio"><label><input type="radio" name="sex" value="man" />男</label><label<input type="radio" name="sex" value="woman" />女</label> </div>2.普通多選框 <div class="checkbox"><label><input type="checkbox" name="favs" value="html" />html</label><label><input type="checkbox" name="favs" value="js" />js</label><label><input type="checkbox" name="favs" value="css" />css</label> </div>3.內聯樣式單選框 <label class="radio-inline"><input type="radio" name="sex" value="man" />男 </label> <label class="radio-inline"><input type="radio" name="sex" value="woman" />女 </label4.內聯樣式多選框（同內聯單選框類似）

表單驗證樣式

1.顏色提示：（同form-group）

1.has-warning: 警告黃 2.has-error: 錯誤紅 3.has-success：成功綠

2.圖標提示

1.glyphicon glyphicon-ok: 成功圖標提示 2.glyphicon glyphicon-remove: 錯誤圖標提示 3.glyphicon glyphicon-warning-sign: 警告圖標提示還需要結合has-feedback + form-control-feedback來顯示相應的圖標樣式及顏色示例: <div class="form-horizontal"><div class="form-group has-success has-feedback"><label for="username" class="control-label col-lg-1">username: </label><div calss="col-lg-3"><input type="text" name="username" placeholder="your username: " /><span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span><!--也還可以添加些文字提示--><!--<span>...</span>/ <span class="sr-only">不顯示的提示</span>--></div></div> </div>

創建輸入框組

描述：將多個元素連接起來

input-group: 定義輸入框組容器 input-group-addon：定義添加在輸入框前面或者后面的元素示例: <div class="form-horizontal"><div class="form-group"><label class="control-label col-lg-1" for="email">email: </label><div class="input-group col-lg-5"><span class="input-group-addon">email</span><input type="text" name="email" class="form-control" placeholder="your email" /><span class="input-group-addon">@qq.com</span></div></div> </div>

總結

以上是生活随笔為你收集整理的bootstrap表单样式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。