全面解析Bootstrap表單使用方法(表單控件)
一、輸入框input
單行輸入框,常見(jiàn)的文本輸入框,也就是input的type屬性值為text。
在Bootstrap中使用input時(shí)也必須添加type類(lèi)型,如果沒(méi)有指定type類(lèi)型,將無(wú)法得到正確的樣式,因?yàn)锽ootstrap框架都是通過(guò)input[type=“?”]
(其中?號(hào)代表type類(lèi)型,比如說(shuō)text類(lèi)型,對(duì)應(yīng)的是input[type=“text”])的形式來(lái)定義樣式的。
為了讓控件在各種表單風(fēng)格中樣式不出錯(cuò),需要添加類(lèi)名“.form-control”。
<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form>
二、下拉選擇框select
Bootstrap框架中的下拉選擇框使用和原始的一致,多行選擇設(shè)置multiple屬性的值為multiple。
<form role="form"> <div class="form-group"> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> <div class="form-group"> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
三、文本域textarea
文本域和原始使用方法一樣,設(shè)置rows可定義其高度,設(shè)置cols可以設(shè)置其寬度。
但如果textarea元素中添加了類(lèi)名“.form-control”類(lèi)名,則無(wú)需設(shè)置cols屬性。
因?yàn)锽ootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。
<form role="form"> <div class="form-group"> <textarea class="form-control" rows="3"></textarea> </div> </form>
四、復(fù)選框checkbox和單選擇按鈕radio
1、不管是checkbox還是radio都使用label包起來(lái)了
2、checkbox連同label標(biāo)簽放置在一個(gè)名為“.checkbox”的容器內(nèi)
3、radio連同label標(biāo)簽放置在一個(gè)名為“.radio”的容器內(nèi)
<form role="form"> <div class="checkbox"> <label> <input type="checkbox" value=""> 記住密碼 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked> 喜歡 </label> </div> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate"> 不喜歡 </label> </div> </form>
五、復(fù)選框和單選按鈕水平排列
1、如果checkbox需要水平排列,只需要在label標(biāo)簽上添加類(lèi)名“.checkbox-inline”
2、如果radio需要水平排列,只需要在label標(biāo)簽上添加類(lèi)名“.radio-inline”
<form role="form"> <div class="form-group"> <label class="checkbox-inline"> <input type="checkbox" value="option1">游戲 </label> <label class="checkbox-inline"> <input type="checkbox" value="option2">攝影 </label> <label class="checkbox-inline"> <input type="checkbox" value="option3">旅游 </label> </div> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </div> </form>
六、表單控件大小
Bootstrap框架還提供了兩個(gè)不同的類(lèi)名,用來(lái)控制表單控件的高度。這兩個(gè)類(lèi)名是:
1、input-sm:讓控件比正常大小更小
2、input-lg:讓控件比正常大小更大
這兩個(gè)類(lèi)適用于表單中的input,textarea和select控件。
<input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件變大"> <input class="form-control" type="text" placeholder="正常大小"> <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件變小">
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附兩個(gè)精彩的專(zhuān)題:Bootstrap學(xué)習(xí)教程 Bootstrap實(shí)戰(zhàn)教程
以上就是Bootstrap表單控件的使用方法,之后還有更多內(nèi)容會(huì)不斷更新,希望大家繼續(xù)關(guān)注。
相關(guān)文章
javascript數(shù)組中的reduce方法和pop方法
這篇文章主要介紹了javascript數(shù)組中的reduce方法和pop方法,文章內(nèi)容介紹詳細(xì),具有一定的參考價(jià)值需要的小伙伴可以參考一下,希望對(duì)你的學(xué)習(xí)有所幫助2022-03-03js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08unicloud云開(kāi)發(fā)進(jìn)階獲取首頁(yè)列表數(shù)據(jù)示例詳解
這篇文章主要為大家介紹了unicloud云開(kāi)發(fā)進(jìn)階獲取首頁(yè)列表數(shù)據(jù)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03JavaScript ES6中export、import與export default的用法和區(qū)別
這篇文章主要給大家介紹了JavaScript ES6中export、import與export default的用法和區(qū)別,文中介紹的非常詳細(xì),相信對(duì)大家學(xué)習(xí)ES6會(huì)有一定的幫助,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-03-03JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)數(shù)組簡(jiǎn)單去重及數(shù)組根據(jù)對(duì)象中的元素去重操作,涉及javascript數(shù)組元素的遍歷、判斷、追加等操作實(shí)現(xiàn)去重功能的相關(guān)技巧,需要的朋友可以參考下2018-01-01用javascript實(shí)現(xiàn)li 列表數(shù)據(jù)隔行變換背景顏色
客戶(hù)端效果,效率自然不錯(cuò)。以前的做法是偶數(shù)行時(shí)給li加一個(gè)class,方法當(dāng)然不可取,如果后臺(tái)讀取再加class就很麻煩了,看看這個(gè)效果2007-08-08