6.3.1表單 Bootstrap通過一些簡單的HTML標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單。表單元素中的文本控件如<input>、<textarea>、<checkbox>、<radio>、<select>在使用.form-control類的情況下，寬度都是設(shè)置為100%。 Bootstrap表單布局分為堆疊表單(全屏寬度垂直方向)和內(nèi)聯(lián)表單（水平方向）。1、表單1.堆疊表單2.內(nèi)聯(lián)表單1堆疊表單以下示例使用兩個(gè)輸入框，一個(gè)提交按鈕來創(chuàng)建堆疊表單，效果如圖6-26所示。1堆疊表單以下示例使用兩個(gè)輸入框，一個(gè)提交按鈕來創(chuàng)建堆疊表單，效果如圖6-26所示。<divclass="container"><h2>堆疊表單</h2><form> <divclass="form-group"> <labelfor="email">用戶名:</label> <inputtype="email"class="form-control"id="email"placeholder="輸入用戶名"> </div> <divclass="form-group"> <labelfor="pwd">密碼:</label> <inputtype="password"class="form-control"id="pwd"placeholder="輸入密碼"> </div> <!--<divclass="form-check"> <labelclass="form-check-label"><inputclass="form-check-input"type="checkbox">Rememberme</label> </div>--> <buttontype="submit"class="btnbtn-primary">提交</button></form></div>2內(nèi)聯(lián)表單

所有內(nèi)聯(lián)表單中的元素都是左對齊的。注意：在屏幕寬度小于576px時(shí)為垂直堆疊，如果屏幕寬度大于等于576px時(shí)表單元素才會(huì)顯示在同一個(gè)水平線上。內(nèi)聯(lián)表單需要在<form>元素上添加.form-inline類，我們現(xiàn)在將上述代碼增加該類且去掉form-group之后，效果如圖6-27所示。6.3.2表單控件Bootstrap4支持以下表單控件：input、textarea、checkbox、radio、select。2、表單控件1.BootstarpInput2.Bootstarptextarea3.Bootstrap復(fù)選框(checkbox)與單選框(Radio)4.Bootstrap

select下拉菜單1BootstrapInput

Bootstrap支持所有的HTML5輸入類型:text,password,datetime,datetime-local,date,month,time,week,number,email,url,search,tel以及color。

注意：如果input的type屬性未正確聲明，輸入框的樣式將不會(huì)顯示。

以下示例使用兩個(gè)input元素，一個(gè)是text，一個(gè)是password，效果如圖6-28所示。2Bootstraptextarea<divclass="container"><h2>表單控件:textarea</h2><p>以下示例演示了textarea的樣式。</p><form><divclass="form-group"><labelfor="comment">評(píng)論:</label><textareaclass="form-control"rows="5"id="comment"></textarea></div></form></div>3Bootstrap復(fù)選框(checkbox)與單選框(Radio)使用.form-check可以格式化復(fù)選框和單選框按鈕，用以改進(jìn)它們的默認(rèn)布局和動(dòng)作呈現(xiàn)，復(fù)選框用于在列表中選擇一個(gè)或多個(gè)選項(xiàng)，單選框則用于多許多選項(xiàng)中選擇一個(gè)。復(fù)選框和單選框也是可以禁用的，只要not-allowed在父級(jí)的懸停上提供定義，<label>需要將該.disabled類添加到父級(jí).form-check，同時(shí)控件也會(huì)淡化文字顏色以灰色顯示禁用狀態(tài)。以下示例包含了三個(gè)選項(xiàng)，最后一個(gè)是禁用的，效果如圖6-30所示。<divclass="container"><h2>表單控件:checkbox</h2><p>以下示例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的：</p><form><divclass="form-check"><labelclass="form-check-label"><inputtype="checkbox"class="form-check-input"value="">Option1</label></div><divclass="form-check"><labelclass="form-check-label"><inputtype="checkbox"class="form-check-input"value="">Option2</label></div><divclass="form-checkdisabled"><labelclass="form-check-label"><inputtype="checkbox"class="form-check-input"disabled>Option3</label></div></form></div>3Bootstrap復(fù)選框(checkbox)與單選框(Radio)使用.form-check-inline類可以讓選項(xiàng)顯示在同一行上，<divclass="form-checkform-check-inline">，效果如圖6-31所示。3Bootstrap復(fù)選框(checkbox)與單選框(Radio)單選框用于讓用戶從一系列預(yù)設(shè)置的選項(xiàng)中進(jìn)行選擇，只能選一個(gè)。以下示例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的，效果如圖6-32所示。<h2>表單控件:radio</h2><p>以下示例包含了三個(gè)選項(xiàng)。最后一個(gè)是禁用的：</p><form><divclass="radio"><label><inputtype="radio"name="optradio">Option1</label></div><divclass="radio"><label><inputtype="radio"name="optradio">Option2</label></div><divclass="radiodisabled"><label><inputtype="radio"name="optradio"disabled>Option3</label></div></form></div>3Bootstrap復(fù)選框(checkbox)與單選框(Radio)使用.radio-inline類可以讓選項(xiàng)顯示在同一行上，<labelclass="radio-inline"></label>，如圖6-33所示4Bootstrap

select下拉菜單當(dāng)您想讓用戶從多個(gè)選項(xiàng)中進(jìn)行選擇，但是默認(rèn)情況下只能選擇一個(gè)選項(xiàng)時(shí)，則使用選擇框。以下示例包含了兩個(gè)下拉菜單，效果如圖6-34所示。4Bootstrap

select下拉菜單<divclass="container"><h2>表單控件:select</h2><p>以下表單包含了兩個(gè)下拉菜單(select列表):</p><form><divclass="form-group"><labelfor="sel1">單選下拉菜單:</label><selectclass="form-control"id="sel1"><option>1</option><option>2</option><option>3</option><option>4</option></select><br><labelfor="sel2">多選下拉菜單(按住shift鍵，可以選取多個(gè)選項(xiàng)):</label><selectmultipleclass="form-control"id="sel2"><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div>6.3.3輸入框組3、輸入框組1.輸入框組2.輸入框大小3.多輸入框和多文本4.復(fù)選框和單選框5.輸入框添加按鈕組6.設(shè)置下拉菜單7.輸入框標(biāo)簽6.3.3輸入框組

1輸入框組

我們可以使用.input-group類來向表單輸入框中添加更多的樣式，如圖標(biāo)、文本或者按鈕。使用.input-group-prepend類可以在輸入框的的前面添加文本信息，使用.input-group-append類添加在輸入框的后面，使用.input-group-text類來設(shè)置文本的樣式，效果如圖6-35所示。6.3.3輸入框組

1輸入框組

<divclass="containermt-3"> <h3>輸入框組</h3> <formaction="/action_page.php"> <divclass="input-groupmb-3"> <divclass="input-group-prepend"> <spanclass="input-group-text">@</span> </div> <inputtype="text"class="form-control"placeholder="Username"id="usr"name="username"> </div> <divclass="input-groupmb-3"> <inputtype="text"class="form-control"placeholder="YourEmail"id="mail"name="email"> <divclass="input-group-append"> <spanclass="input-group-text">@</span> </div> </div> <buttontype="submit"class="btnbtn-primary">Submit</button> </form></div>2輸入框大小將相對表單大小的class樣式加到.input-group中，其內(nèi)容會(huì)自動(dòng)調(diào)整大小，如.input-group-lg、.input-group-sm，不需要在每個(gè)元素上重重使用樣式控制其大小。使用.input-group-sm類來設(shè)置小的輸入框，.input-group-lg類設(shè)置大的輸入框，如圖6-36所示。3多個(gè)輸入框和多個(gè)文本3多個(gè)輸入框和多個(gè)文本<divclass="containermt-3"><h3>多個(gè)輸入框和文本</h3><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><spanclass="input-group-text">Person</span></div><inputtype="text"class="form-control"placeholder="FirstName"><inputtype="text"class="form-control"placeholder="LastName"></div></form><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><spanclass="input-group-text">One</span><spanclass="input-group-text">Two</span><spanclass="input-group-text">Three</span></div><inputtype="text"class="form-control"></div></form></div>4復(fù)選框與單選框文本信息可以使用復(fù)選框與單選框替代，如圖6-38所示。4復(fù)選框與單選框文本信息可以使用復(fù)選框與單選框替代，如圖6-38所示。<divclass="containermt-3"><h3>復(fù)選框與單選框</h3><p>文本信息可以使用復(fù)選框與單選框替代：</p><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="checkbox"></div></div><inputtype="text"class="form-control“placeholder="RUNOOB"></div></form><form><divclass="input-groupmb-3"><divclass="input-group-prepend"><divclass="input-group-text"><inputtype="radio"></div></div><inputtype="text"class="form-control"placeholder="GOOGLE"></div></form></div>5輸入框添加按鈕組5輸入框添加按鈕組<divclass="containermt-3"> <h1>輸入框添加按鈕組</h1> <divclass="input-groupmb-3"> <divclass="input-group-prepend"> <buttonclass="btnbtn-outline-secondary"type="button">BasicButton</button> </div> <inputtype="text"class="form-control"placeholder="Sometext"> </div> <divclass="input-groupmb-3"> <inputtype="text"class="form-control"placeholder="Search"> <divclass="input-group-append">

<buttonclass="btnbtn-success"type="submit">Go</button> </div> </div> <divclass="input-groupmb-3"> <inputtype="text"class="form-control"placeholder="Somethingclever.."> <divclass="input-group-append"> <buttonclass="btnbtn-primary"type="button">OK</button> <buttonclass="btnbtn-danger"type="button">Cancel</button> </div> </div> </div>6設(shè)置下拉菜單輸入框中添加下拉菜單不需要使用.dropdown類，如圖6-40所示。6設(shè)置下拉菜單輸入框中添加下拉菜單不需要使用.dropdown類，如圖6-40所示。</button><divclass="dropdown-menu"><aclass="dropdown-item"href="">GOOGLE</a><aclass="dropdown-item"href="">RUNOOB</a><aclass="dropdown-item"href="">TAOBAO</a></div></div><inputtype="text"class="form-control"placeholder="網(wǎng)站地址"></div></form></div><divclass="containermt-3"><h3>設(shè)置下拉菜單</h3><p>輸入框中添加下拉菜單不需要使用.dropdown類。</p><form><divclass="input-groupmt-3mb-3"><divclass="input-group-prepend"><buttontype=“button”class="btnbtn-outline-secondarydropdown-toggle"data-toggle="dropdown">選擇網(wǎng)站7輸入框組標(biāo)簽在輸入框組通過在輸入框組外圍的label來設(shè)置標(biāo)簽，標(biāo)簽的for屬性需要與輸入框組的id對應(yīng)，點(diǎn)擊標(biāo)簽后可以聚焦輸入框，如圖6-41所示。7輸入框組標(biāo)簽在輸入框組通過在輸入框組外圍的label來設(shè)置標(biāo)簽，標(biāo)簽的for屬性需要與輸入框組的id對應(yīng)，點(diǎn)擊標(biāo)簽后可以聚焦輸入框，如圖6-41所示。<divclass="containermt-3"><h2>輸入框組標(biāo)簽</h2><p>在輸入框組通過在輸入框組外圍的label來設(shè)置標(biāo)簽，標(biāo)簽的for屬性需要與輸入框組的id對應(yīng)。</p><p>點(diǎn)擊標(biāo)簽后可以聚焦輸入框：</p><form><labelfor="demo">這里輸入您的郵箱:</label><divclass="input-groupmb-3"><inputtype="text"class="form-control"placeholder="Email"id="demo"name="email"><divclass="input-group-append"><spanclass="input-group-text">@</span></div></div></form></div>作業(yè)作業(yè)<form>