BootStrap乾貨篇之表單
- 2019 年 12 月 31 日
- 筆記
文章目錄
BootStrap乾貨篇之表單
基本介紹
單獨的表單控制項會被自動賦予一些全局樣式。所有設置了
.form-control類的<input>、<textarea>和<select>元素都將被默認設置寬度屬性為width: 100%;。 將label元素和前面提到的控制項包裹在.form-group中可以獲得最好的排列。 基本實例：
<div class='container'> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <label for="exampleInputFile">File input</label> <input type="file" id="exampleInputFile"> <p class="help-block">Example block-level help text here.</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>
說明：這裡的
form-control是對所有的輸入控制項而言的,源碼中將width設置為100%，表示會將這個輸入控制項佔滿一整行，form-group是用來對label和input更好的排版的，其中還有form-group-sm,form-group-lg，源碼中分別利用這個對帶有form-control的控制項設置了不同的高度，具體看源碼，不過正常情況下還是使用form-group
內聯表單
為
<form>元素添加.form-inline類可使其內容左對齊並且表現為inline-block級別的控制項。只適用於視口（viewport）至少在768px寬度時（視口寬度再小的話就會使表單摺疊）從源碼中可以看到對form-inline下的form-group,form-control,form-control-static,input-group,radio,checkbox都是用了display:inline-block注意：
- 在
Bootstrap中，輸入框和單選/多選框控制項默認被設置為width:100%; 寬度。在內聯表單，我們將這些元素的寬度設置為width: auto;，因此，多個控制項可以排列在同一行。根據你的布局需求，可能需要一些額外的訂製化組件。 - 一定要有
label標籤，如果不想要label標籤可以設置.sr-only將其隱藏如果你沒有為每個輸入控制項設置label標籤，螢幕閱讀器將無法正確識別。對於這些內聯表單，你可以通過為 label 設置 .sr-only 類將其隱藏。還有一些輔助技術提供label標籤的替代方案，比如aria-label、aria-labelledby或title屬性。如果這些都不存在，螢幕閱讀器可能會採取使用placeholder屬性，如果存在的話，使用佔位符來替代其他的標記，但要注意，這種方法是不妥當的。
實例:
<form class="form-inline"> <!--指定了form-inline類--> <div class="form-group"> <!--label中的for標籤是用於綁定組件的，如果指定了for標籤，input中的id也和for標籤的內容相同，那麼就會當滑鼠點擊<label>內容時會自動聚焦在input上--> <label class="sr-only" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email"> </div> <div class="form-group"> <label class="sr-only" for="exampleInputPassword3">Password</label> <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> <button type="submit" class="btn btn-default">Sign in</button> </form>
水平表單
水平表單通過指定為form指定
form-horizontal類來設定，其中可以使用BootStrap的柵欄系統設置水平間距，其中的form-group的div就表示一行了，相當於<div class='row'></div>,因此只需要在label和input中指定列就行了，但是input標籤不能直接使用，要在外面加上div實例：
<form class="form-horizontal"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <input type="email" class="form-control" id="inputEmail3" placeholder="Email"> </div> </div> <div class="form-group"> <!--相當與<div class='row'></div>--> <label for="inputPassword3" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <div class="checkbox"> <label> <input type="checkbox"> Remember me </label> </div> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Sign in</button> </div> </div> </form>
說明上面的
label標籤中的control-label主要的作用是設置文字的對齊方式為左對齊，如果不加這個將會在右邊出現很大的空白
多選和單選框
多選框
（checkbox）用於選擇列表中的一個或多個選項，而單選框（radio）用於從多個選項中只選擇一個。其中提供的類有checkbox,checkbox-inline,radio,radio-inline
內聯單選和多選框
通過將 .checkbox-inline 或 .radio-inline 類應用到一系列的多選框（
checkbox）或單選框（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 class="checkbox-inline"> <label for="sex"><input type="checkbox">男</label> </div> <div class="checkbox-inline"> <label for="sex"><input type="checkbox">男</label> </div>
不帶label文本的Checkbox 和 radio
如果需要
<label>內沒有文字，輸入框（input）正是你所期望的。 目前只適用於非內聯的checkbox和radio。 請記住，仍然需要為使用輔助技術的用戶提供某種形式的label（例如，使用aria-label）。 實例：
<div class="checkbox"> <label> <input type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </label> </div> <div class="radio"> <label> <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> </label> </div>
下拉列表（select）
實例：
<select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>
靜態控制項
如果需要在表單中將一行純文本和
label元素放置於同一行，為<p>標籤設置為form-control-static實例：
<form class="form-horizontal"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">[email protected]</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form>
參考文章
作者說 本人秉著方便他人的想法才開始寫技術文章的，因為對於自學的人來說想要找到系統的學習教程很困難，這一點我深有體會，我也是在不斷的摸索中才小有所成，如果你們覺得我寫的不錯就幫我推廣一下，讓更多的人看到。另外如果有什麼錯誤的地方也要及時聯繫我，方便我改進，謝謝大家對我的支援
版權資訊所有者：chenjiabing 如若轉載請標明出處：chenjiabing666.github.io6
