BootStrap注意事項(xiàng)小結(jié)(五)表單
1.基本實(shí)例
單獨(dú)的表單控件會(huì)被自動(dòng)賦予一些全局樣式。所有設(shè)置了 .form-control類的 <input>、<textarea> 和 <select> 元素都將被默認(rèn)設(shè)置寬度屬性為 width: 100%;。 將 label 元素和前面提到的控件包裹在 .form-group中可以獲得最好的排列。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form role="form"><div class="form-group"> <label for="name">名稱</label> <input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱"> </div> <div class="form-group"> <label for="inputfile">文件輸入</label> <input type="file" id="inputfile"> <p class="help-block">這里是塊級(jí)幫助文本的實(shí)例。</p> </div> <div class="checkbox"> <label> <input type="checkbox"> 請(qǐng)打勾 </label> </div> <button type="submit" class="btn btn-default">提交</button> </form> </div> </body> </html>
不要將表單組合輸入框組混合使用
不要將表單組直接和輸入框組混合使用。建議將輸入框組嵌套到表單組中使用。
2.內(nèi)聯(lián)表單
為 <form> 元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為inline-block 級(jí)別的控件。只適用于視口(viewport)至少在 768px 寬度時(shí)(視口寬度再小的話就會(huì)使表單折疊)。
可能需要手動(dòng)設(shè)置寬度
在 Bootstrap 中,輸入框和單選/多選框控件默認(rèn)被設(shè)置為 width: 100%; 寬度。在內(nèi)聯(lián)表單,我們將這些元素的寬度設(shè)置為 width: auto;,因此,多個(gè)控件可以排列在同一行。根據(jù)你的布局需求,可能需要一些額外的定制化組件。
一定要添加 label 標(biāo)簽
如果你沒(méi)有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽,屏幕閱讀器將無(wú)法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單,你可以通過(guò)為 label 設(shè)置 .sr-only類將其隱藏。還有一些輔助技術(shù)提供label標(biāo)簽的替代方案,比如aria-label、aria-labelledby 或 title 屬性。如果這些都不存在,屏幕閱讀器可能會(huì)采取使用 placeholder 屬性,如果存在的話,使用占位符來(lái)替代其他的標(biāo)記,但要注意,這種方法是不妥當(dāng)?shù)摹?/p>
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">Name</label> <input type="text" class="form-control" id="exampleInputName2" placeholder="匯智網(wǎng)"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputEmail2">Email</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="service@hubwiz.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form> </div> </body> </html>
3.水平排列的表單
通過(guò)為表單添加 .form-horizontal 類,并聯(lián)合使用 Bootstrap 預(yù)置的柵格類,可以將 label 標(biāo)簽和控件組水平并排布局。這樣做將改變 .form-group 的行為,使其表現(xiàn)為柵格系統(tǒng)中的行(row),因此就無(wú)需再額外添加 .row 了。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-horizontal" role="form"><div class="form-group"> <label for="firstname" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請(qǐng)輸入名字"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">姓</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請(qǐng)輸入姓"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> 請(qǐng)記住我 </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">登錄</button> </div> </div> </form> </div> </body> </html>
4.被支持的控件1
表單布局實(shí)例中展示了其所支持的標(biāo)準(zhǔn)表單控件。
輸入框
包括大部分表單控件、文本輸入域控件,還支持所有 HTML5 類型的輸入控件: text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和 color。
必須添加類型聲明
只有正確設(shè)置了 type 屬性的輸入控件才能被賦予正確的樣式。
輸入控件組
如需在文本輸入域 <input> 前面或后面添加文本內(nèi)容或按鈕控件,請(qǐng)參考輸入控件組。
文本域
支持多行文本的表單控件。可根據(jù)需要改變 rows 屬性。
<textarea class="form-control" rows="3"></textarea> <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <div class="form-group"><input type="text" class="form-control" placeholder="文本輸入"></div> <div class="form-group"><textarea class="form-control" rows="4" placeholder="文本框"></textarea></div> </div> </body> </html>
5.被支持的控件2
多選和單選框
多選框(checkbox)用于選擇列表中的一個(gè)或多個(gè)選項(xiàng),而單選框(radio)用于從多個(gè)選項(xiàng)中只選擇一個(gè)。
設(shè)置了 disabled 屬性的單選或多選框都能被賦予合適的樣式。對(duì)于和多選或單選框聯(lián)合使用的 <label> 標(biāo)簽,如果也希望將懸停于上方的鼠標(biāo)設(shè)置為“禁止點(diǎn)擊”的樣式,請(qǐng)將 .disabled 類賦予 .radio、.radio-inline、.checkbox、.checkbox-inline 或 <fieldset>。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="checkbox"> <label> <input type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled=""> Option two is disabled </label> </div> <p></p><div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked=""> Option one is this and that—be sure to include why it's great </label> </div><p></p> <p></p><div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> Option two can be something else and selecting it will deselect option one </label> </div><p></p> <p></p><div class="radio disabled"> <label> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled=""> Option three is disabled </label> </div> </body> </html>
內(nèi)聯(lián)單選和多選框
通過(guò)將 .checkbox-inline 或 .radio-inline 類應(yīng)用到一系列的多選框(checkbox)或單選框(radio)控件上,可以使這些控件排列在一行。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="radio"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2 </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3 </label> </div> </body> </html>
下拉列表(select)
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <br> <select multiple="" class="form-control"> ... </select> </body> </html>
6.靜態(tài)控件
如果需要在表單中將一行純文本和 label 元素放置于同一行,為 <p> 元素添加 .form-control-static 類即可。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <div class="col-sm-10"> <label class="col-sm-2 control-label">Email</label> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">密碼</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="請(qǐng)輸入密碼"> </div> </div> </form> <form class="form-inline"> <div class="form-group"> <label class="sr-only">Email</label> </div> <div class="form-group"> <label for="inputPassword2" class="sr-only">Password</label><!--影藏--> <input type="password" class="form-control" id="inputPassword2" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Confirm identity</button> </form> </div> </body> </html>
7.焦點(diǎn)狀態(tài)
我們將某些表單控件的默認(rèn) outline 樣式移除,然后對(duì) :focus 狀態(tài)賦予box-shadow 屬性。
<form> <input class="form-control" id="focusInput" type="text" value="Demonstrative focus state"> </form>
演示:focus 狀態(tài)
在本文檔中,我們?yōu)樯厦鎸?shí)例中的輸入框賦予了自定義的樣式,用于演示 .form-control 元素的 :focus 狀態(tài)。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="container"> <br> <form><input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state"> </form> </div> </body> </html>
8.禁用狀態(tài)
為輸入框設(shè)置 disabled 屬性可以禁止其與用戶有任何交互(焦點(diǎn)、輸入等)。被禁用的輸入框顏色更淺,并且還添加了 not-allowed 鼠標(biāo)狀態(tài)。
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled="">
被禁用的 fieldset
為<fieldset> 設(shè)置 disabled 屬性,可以禁用 <fieldset> 中包含的所有控件。
<a> 標(biāo)簽的鏈接功能不受影響
默認(rèn)情況下,瀏覽器會(huì)將 <fieldset disabled> 內(nèi)所有的原生的表單控件(<input>、<select> 和 <button> 元素)設(shè)置為禁用狀態(tài),防止鍵盤和鼠標(biāo)與他們交互。然而,如果如果表單中還包含 <a ... class="btn btn-*"> 元素,這些元素將只被賦予 pointer-events: none 屬性。正如在關(guān)于禁用狀態(tài)的按鈕章節(jié)中(尤其是關(guān)于錨點(diǎn)元素的子章節(jié)中)所描述的那樣,該 CSS 屬性尚不規(guī)范,并且在 Opera 18 及更低版本的瀏覽器或 Internet Explorer 11 總沒(méi)有得到全面支持,并且不會(huì)阻止鍵盤用戶能夠獲取焦點(diǎn)或激活這些鏈接。所以為了安全起見(jiàn),建議使用自定義 JavaScript 來(lái)禁用這些鏈接。
跨瀏覽器兼容性
雖然 Bootstrap 會(huì)將這些樣式應(yīng)用到所有瀏覽器上,Internet Explorer 11 及以下瀏覽器中的 <fieldset> 元素并不完全支持 disabled 屬性。因此建議在這些瀏覽器上通過(guò) JavaScript 代碼來(lái)禁用<fieldset>。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <form class="form-horizontal" role="form"><div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">禁用</label> <div class="col-sm-10"> <input class="form-control" id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled> </div> </div> <fieldset disabled> <div class="form-group"> <label for="disabledTextInput" class="col-sm-2 control-label">禁用輸入(Fieldset disabled)</label> <div class="col-sm-10"> <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> </div> </div> <div class="form-group"> <label for="disabledSelect" class="col-sm-2 control-label">禁用選擇菜單(Fieldset disabled)</label> <div class="col-sm-10"> <select id="disabledSelect" class="form-control"> <option>禁止選擇</option> </select> </div> </div> </fieldset> </form> </body> </html>
9.只讀狀態(tài)
為輸入框設(shè)置 readonly 屬性可以禁止用戶修改輸入框中的內(nèi)容。處于只讀狀態(tài)的輸入框顏色更淺(就像被禁用的輸入框一樣),但是仍然保留標(biāo)準(zhǔn)的鼠標(biāo)狀態(tài)。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <input class="form-control" type="text" placeholder="Readonly input here…" readonly=""> </body> </html>
10.校驗(yàn)狀態(tài)
Bootstrap 對(duì)表單控件的校驗(yàn)狀態(tài),如 error、warning 和 success 狀態(tài),都定義了樣式。使用時(shí),添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內(nèi)的.control-label、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式。
將驗(yàn)證狀態(tài)傳達(dá)給輔助設(shè)備和盲人用戶
使用這些校驗(yàn)樣式只是為表單控件提供一個(gè)可視的、基于色彩的提示,但是并不能將這種提示信息傳達(dá)給使用輔助設(shè)備的用戶 - 例如屏幕閱讀器 - 或者色盲用戶。
為了確保所有用戶都能獲取正確信息,Bootstrap 還提供了另一種提示方式。例如,你可以在表單控件的 <label> 標(biāo)簽上以文本的形式顯示提示信息(就像下面代碼中所展示的);包含一個(gè) Glyphicon 字體圖標(biāo) (還有賦予 .sr-only 類的文本信息 - 參考Glyphicon 字體圖標(biāo)實(shí)例);或者提供一個(gè)額外的 輔助信息 塊。另外,對(duì)于使用輔助設(shè)備的用戶,無(wú)效的表單控件還可以賦予一個(gè) aria-invalid="true" 屬性。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="form-group has-success"><label class="control-label" for="inputSuccess1">Input with success</label> <input type="text" class="form-control" id="inputSuccess1"> </div> <div class="form-group has-warning"> <label class="control-label" for="inputWarning1">Input with warning</label> <input type="text" class="form-control" id="inputWarning1"> </div> <div class="form-group has-error"> <label class="control-label" for="inputError1">Input with error</label> <input type="text" class="form-control" id="inputError1"> </div> <div class="has-success"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxSuccess" value="option1">Checkbox with success</label> </div> </div> <div class="has-warning"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxWarning" value="option1">Checkbox with warning</label> </div> </div> <div class="has-error"> <div class="checkbox"> <label> <input type="checkbox" id="checkboxError" value="option1">Checkbox with error</label> </div> </div> </body> </html>
11.添加額外的圖標(biāo)
你還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)。只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)即可。
反饋圖標(biāo)(feedback icon)只能使用在文本輸入框 <input class="form-control"> 元素上。
圖標(biāo)、label 和輸入控件組
對(duì)于不帶有 label 標(biāo)簽的輸入框以及右側(cè)帶有附加組件的輸入框組,需要手動(dòng)為其圖標(biāo)定位。為了讓所有用戶都能訪問(wèn)你的網(wǎng)站,我們強(qiáng)烈建議為所有輸入框添加 label 標(biāo)簽。如果你不希望將label 標(biāo)簽展示出來(lái),可以通過(guò)添加 .sr-only 類來(lái)實(shí)現(xiàn)。如果的確不能添加 label 標(biāo)簽,請(qǐng)調(diào)整圖標(biāo)的 top 值。對(duì)于輸入框組,請(qǐng)根據(jù)你的實(shí)際情況調(diào)整 right 值。
向輔助技術(shù)設(shè)備傳遞圖標(biāo)的含義
為了確保輔助技術(shù)- 如屏幕閱讀器 - 正確傳達(dá)一個(gè)圖標(biāo)的含義,額外的隱藏的文本應(yīng)包含在 .sr-only 類中,并明確關(guān)聯(lián)使用了 aria-describedby 的表單控件?;蛘?,以某些其他形式(例如,文本輸入字段有一個(gè)特定的警告信息)傳達(dá)含義,例如改變與表單控件實(shí)際相關(guān)聯(lián)的 <label> 的文本。
雖然下面的例子已經(jīng)提到各自表單控件本身的 <label> 文本的驗(yàn)證狀態(tài),上述技術(shù)(使用 .sr-only 文本 和 aria-describedby) )已經(jīng)包括了需要說(shuō)明的目的。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="form-group has-success has-feedback"><label class="control-label" for="inputSuccess2">Input with success</label> <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status"> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputSuccess2Status" class="sr-only">(success)</span> </div> <div class="form-group has-warning has-feedback"> <label class="control-label" for="inputWarning2">Input with warning</label> <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status"> <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span> <span id="inputWarning2Status" class="sr-only">(warning)</span> </div> <div class="form-group has-error has-feedback"> <label class="control-label" for="inputError2">Input with error</label> <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status"> <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> <span id="inputError2Status" class="sr-only">(error)</span> </div> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputGroupSuccess1">Input group with success</label> <div class="input-group"> <span class="input-group-addon">@</span> <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status"> </div> <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="inputGroupSuccess1Status" class="sr-only">(success)</span> </div> </body> </html>
12.控件尺寸
通過(guò) .input-lg 類似的類可以為控件設(shè)置高度,通過(guò) .col-lg-* 類似的類可以為控件設(shè)置寬度。
高度尺寸
創(chuàng)建大一些或小一些的表單控件以匹配按鈕尺寸。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <input class="form-control input-lg" type="text" placeholder=".input-lg"> <input class="form-control" type="text" placeholder="Default input"> <input class="form-control input-sm" type="text" placeholder=".input-sm"> <select class="form-control input-lg">...</select> <select class="form-control">...</select> <select class="form-control input-sm">...</select> </body> </html>
水平排列的表單組的尺寸
通過(guò)添加 .form-group-lg 或 .form-group-sm 類,為 .form-horizontal包裹的 label 元素和表單控件快速設(shè)置尺寸。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <form class="form-horizontal"> <div class="form-group form-group-lg"> <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> <div class="col-sm-10"> <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input"> </div> </div> <div class="form-group form-group-sm"> <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> <div class="col-sm-10"> <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input"> </div> </div> </form> </body> </html>
調(diào)整列(column)尺寸
用柵格系統(tǒng)中的列(column)包裹輸入框或其任何父元素,都可很容易的為其設(shè)置寬度。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <div class="row"> <div class="col-xs-2"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> <div class="col-xs-3"> <input type="text" class="form-control" placeholder=".col-xs-3"> </div> <div class="col-xs-4"> <input type="text" class="form-control" placeholder=".col-xs-4"> </div> </div> </body> </html>
13.輔助文本
針對(duì)表單控件的“塊(block)”級(jí)輔助文本。
與表單控件相關(guān)聯(lián)的幫助文本
與表單控件相關(guān)聯(lián)的幫助文本 aria-describedby 屬性的表單控件關(guān)聯(lián),這將確保使用輔助技術(shù)- 如屏幕閱讀器 - 的用戶獲取控件焦點(diǎn)或進(jìn)入控制時(shí)顯示這個(gè)幫助文本。
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > </head> <body> <form role="form"><span>幫助文本實(shí)例</span> <input class="form-control" type="text" placeholder=""> <span class="help-block">一個(gè)較長(zhǎng)的幫助文本塊,超過(guò)一行,需要擴(kuò)展到下一行。本實(shí)例中的幫助文本總共有兩行。</span> </form> <label class="sr-only" for="inputHelpBlock">Input with help text</label> <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> ... <span id="helpBlock" class="help-block">一塊幫助文本,突破到一個(gè)新的線,可以超越一行。</span> </body> </html>
以上所述是小編給大家介紹的BootStrap注意事項(xiàng)小結(jié)(五)表單,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Javascript動(dòng)畫插件lottie-web的使用方法
這篇文章主要介紹了Javascript動(dòng)畫插件lottie-web的使用方法,包括配合vue-cli使用及在HTML頁(yè)面中使用代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02js調(diào)用瀏覽器打印模塊實(shí)現(xiàn)點(diǎn)擊按鈕觸發(fā)自定義函數(shù)
把瀏覽器打印的功能保留并賦予到自己添加的按鈕當(dāng)中,可以在點(diǎn)擊按鈕的同時(shí)觸發(fā)自定義的函數(shù)2014-03-03JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別詳解
這篇文章主要介紹了JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08關(guān)于JS Lodop打印插件打印Bootstrap樣式錯(cuò)亂問(wèn)題的解決方案
關(guān)于Lodop打印是個(gè)很牛的打印插件,但是打印Bootstrap的樣式的時(shí)候就容易錯(cuò)亂,下面通過(guò)本文給大家分享下這方面的問(wèn)題2016-12-12用JS寫的簡(jiǎn)單的計(jì)算器實(shí)現(xiàn)代碼
參加某公司的面試后,有一機(jī)試題目:用web技術(shù)開發(fā)一個(gè)B/S結(jié)構(gòu)的公式解析器。于是想了想思路,神來(lái)一筆想先寫個(gè)計(jì)算器程序做基礎(chǔ),于是便寫了這個(gè)程序。2009-09-09HBuilderX開發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟
本文主要介紹了HBuilderX開發(fā)一個(gè)簡(jiǎn)單的微信小程序的實(shí)現(xiàn)步驟,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02JS/HTML5游戲常用算法之碰撞檢測(cè) 像素檢測(cè)算法實(shí)例詳解
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 像素檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了javascript像素檢測(cè)碰撞算法的原理、實(shí)現(xiàn)步驟及相關(guān)操作技巧,需要的朋友可以參考下2018-12-12JavaScript 最佳實(shí)踐:幫你提升代碼質(zhì)量
在本篇教程中,我將指出一些重要的 JavaScript 最佳實(shí)踐,讓你不必去用另外一種艱難的方式來(lái)了解它們。準(zhǔn)備好去升級(jí)你的代碼吧2016-12-12