基本表單類(lèi)樣式列表

1.基礎(chǔ)表單: <div class="form-group"><label for="username">username: </label><input type="text" class="form-control" name=username" /> </div>2.內(nèi)聯(lián)表單: <div class="form-inline">... </div>3.水平排列表單:（這種方式下建議使用柵格系統(tǒng)來(lái)控制他們的排列） <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>

單選框和多選框樣式

建議：每次定義單選框樣式最好將每個(gè)選項(xiàng)都放在單獨(dú)的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.內(nèi)聯(lián)樣式單選框 <label class="radio-inline"><input type="radio" name="sex" value="man" />男 </label> <label class="radio-inline"><input type="radio" name="sex" value="woman" />女 </label4.內(nèi)聯(lián)樣式多選框（同內(nèi)聯(lián)單選框類(lèi)似）

表單驗(yàn)證樣式

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

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

2.圖標(biāo)提示

1.glyphicon glyphicon-ok: 成功圖標(biāo)提示 2.glyphicon glyphicon-remove: 錯(cuò)誤圖標(biāo)提示 3.glyphicon glyphicon-warning-sign: 警告圖標(biāo)提示還需要結(jié)合has-feedback + form-control-feedback來(lái)顯示相應(yīng)的圖標(biāo)樣式及顏色示例: <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>

創(chuàng)建輸入框組

描述：將多個(gè)元素連接起來(lái)

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>

總結(jié)

以上是生活随笔為你收集整理的bootstrap表单样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。