任務(wù)6使用Bootstrap表單Bootstrap響應(yīng)式網(wǎng)站開(kāi)發(fā)使用Bootstrap表單1

表單是HTML的一個(gè)重要組成部分，一般來(lái)說(shuō)，網(wǎng)頁(yè)通常會(huì)通過(guò)“表單”形式收集來(lái)自用戶的信息，然后將表單數(shù)據(jù)返回服務(wù)器，被登錄或查詢之用，從而實(shí)現(xiàn)web搜索、注冊(cè)、登錄、問(wèn)卷調(diào)查等功能。

在網(wǎng)頁(yè)制作中，默認(rèn)的表單樣式過(guò)于單調(diào)，所以在網(wǎng)頁(yè)中插入表單后可以使用Bootstrap快速地對(duì)表單進(jìn)行優(yōu)化，Bootstrap的表單樣式簡(jiǎn)潔靈活，通過(guò)一些簡(jiǎn)單的HTML標(biāo)簽和擴(kuò)展的類即可創(chuàng)建出不同樣式的表單，使得網(wǎng)頁(yè)中表單的設(shè)計(jì)與制作變得更加快捷。Bootstrap表單--表單布局的類型表單布局的類型堆疊表單是將標(biāo)簽放置在輸入框上方，垂直方向排列，其中<lable>標(biāo)簽應(yīng)用.form-label類，而表單元素<input>,<textarea>和<select>在應(yīng)用.form-control類下，寬度都是設(shè)置為100%。Bootstrap表單--表單布局的類型堆疊表單演示內(nèi)聯(lián)表單是網(wǎng)頁(yè)水平并排排列的表單樣式。需要使用

.row

和

.col-auto，或者.row

和

.col結(jié)合。<label>標(biāo)簽使用.col-form-label類；<input>,<textarea>和<select>使用.form-control類。Bootstrap表單--表單布局的類型內(nèi)聯(lián)表單演示從外觀上看，簡(jiǎn)單的水平表單和內(nèi)聯(lián)表單比較相似，但是兩者不僅標(biāo)記的數(shù)量上不同，而且在寬度的設(shè)置上也不同，水平排列表單可以使用柵格系統(tǒng)完成標(biāo)簽和表單空間的寬度設(shè)置。Bootstrap表單--表單布局的類型水平排列表單演示<divclass="rowmy-2"><divclass="col-3text-end"> <labelfor="name"class="col-form-label">昵稱:</label></div><divclass="col-9"> <inputtype="text"class="form-control"id="name”"placeholder="昵稱"name="nn"></div></div>表單中控件的分類2Bootstrap表單--按鈕按鈕Bootstrap為按鈕提供了一個(gè)基本樣式類.btn，所有按鈕元素都使用它。Bootstrap為按鈕提供了用來(lái)定義不同風(fēng)格按鈕的預(yù)定義樣式類如表所示。類說(shuō)明類說(shuō)明.btn為按鈕添加基本樣式.btn-info該樣式可用于要彈出信息的按鈕，顯示淺藍(lán)色.btn-default默認(rèn)/標(biāo)準(zhǔn)按鈕.btn-warning表示需要謹(jǐn)慎操作的按鈕，顯示橙色.btn-primary主要按鈕，顯示藍(lán)色.btn-danger表示一個(gè)危險(xiǎn)動(dòng)作的按鈕操作，顯示后紅色.btn-success表示成功的動(dòng)作，顯示綠色.btn-link讓按鈕看起來(lái)像個(gè)鏈接(仍然保留按鈕行為)btn-dark顯示為黑色btn-light顯示為淺色演示Bootstrap表單--按鈕輪廓按鈕如果一個(gè)按鈕不需要有厚重的背景色，則可以將默認(rèn)修飾符類替換為.btn-outline-*類。演示Bootstrap表單--按鈕按鈕尺寸Bootstrap通過(guò)為<button>元素應(yīng)用.btn-lg、.btn-sm兩個(gè)樣式類來(lái)獲得不同尺寸的按鈕，.btn-lg表示大按鈕，.btn-sm表示小按鈕。按鈕激活與禁用狀態(tài)按鈕可設(shè)置為激活或者禁止點(diǎn)擊的狀態(tài)。.active

類可以設(shè)置按鈕是可用的，

disabled

屬性可以設(shè)置按鈕是不可點(diǎn)擊的。當(dāng)按鈕處于禁用狀態(tài)時(shí)，它表現(xiàn)為顏色會(huì)變淡50%，并失去漸變，呈現(xiàn)出無(wú)法單擊的效果。加載按鈕加載按鈕通過(guò)在<button>元素中放置一個(gè)<spanclass="spinner-border"></span>元素，或者放一個(gè)<spanclass="spinner-grow"></span>元素。塊按鈕Bootstrap實(shí)現(xiàn)塊元素是通過(guò)添加.btn-block類可以設(shè)置塊級(jí)按鈕，.d-grid類設(shè)置在父級(jí)元素中。Bootstrap表單--按鈕分辨率小于768像素時(shí)的效果分辨率大于等于768像素時(shí)的效果演示Bootstrap表單—常見(jiàn)表單元素輸入框（input控件）在HTML表單中，input控件是最常用的控件標(biāo)簽。用戶可以在其中輸入大多數(shù)必要的表單數(shù)據(jù)。Bootstrap提供了對(duì)所有原生的HTML5的input類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel

和

color。復(fù)選框（Checkbox）、單選框（Radio）和切換開(kāi)關(guān)復(fù)選框主要是input元素的type屬性設(shè)置為checkbox，通過(guò)使用class="form-check"來(lái)確保標(biāo)簽和復(fù)選框有適當(dāng)邊距。.form-check-label類添加到標(biāo)簽元素，.form-check容器內(nèi)添加.form-check-input類來(lái)設(shè)置復(fù)選框的樣式。checked屬性用于設(shè)置默認(rèn)選中的選項(xiàng)。單選框主要是input元素的type屬性設(shè)置為radio。切換開(kāi)關(guān)是把把復(fù)選框變成一個(gè)可切換的開(kāi)關(guān)，可以在

.form-check

容器內(nèi)使用

.form-switch

類。當(dāng)需要進(jìn)行多行文字輸入的時(shí)，則可以使用文本框textarea控件。這里可以通過(guò)修改

rows的屬性值來(lái)設(shè)置文本框的初始行數(shù)。textarea文本框（textarea控件）Bootstrap表單—常見(jiàn)表單元素演示Bootstrap表單—常見(jiàn)表單元素選擇框（Select）選擇框（Select）屬于菜單列表類表單控件，這類控件往往可選擇的項(xiàng)目較多，使用單選按鈕比較浪費(fèi)控件。可以說(shuō)選擇框控件主要是為了節(jié)省頁(yè)面空間而設(shè)計(jì)使用的。選擇框使用.form-select類進(jìn)行樣式設(shè)置。下拉菜單通過(guò).form-select-lg或.form-select-sm類來(lái)修改大小。選擇框通過(guò)disabled

屬性可以禁止下拉菜單被選擇。演示Bootstrap表單—常見(jiàn)表單元素范圍使用.form-range創(chuàng)建自定義<inputtype="range">控件。在輸入上添加disabled布爾屬性，使其顯示為灰色，并刪除指針事件。范圍輸入分別具有min和max，0和100的隱式值?？梢允褂胢in和max屬性為這些值指定新值。演示輸入框組3Bootstrap表單--輸入框組認(rèn)識(shí)輸入框組通過(guò)在文本輸入、自定義選擇和自定義文件輸入的任一側(cè)添加文本、按鈕或按鈕組，可以輕松擴(kuò)展表單控件。使用.input-group類來(lái)向表單輸入框中添加更多的樣式，如圖標(biāo)、文本或者按鈕。.input-group-text類來(lái)設(shè)置文本的樣式。演示Bootstrap表單--輸入框組輸入框組的形態(tài)1.輸入框大小使用輸入框組時(shí)，在添加了.input-group類后，通過(guò)添加

.input-group-sm

類來(lái)設(shè)置小的輸入框，添加

.input-group-lg

類設(shè)置大的輸入框。2.多個(gè)輸入框和文本應(yīng)用輸入框組時(shí)，支持多個(gè)<input>，也支持多個(gè)包含.input-group-text類的span元素。3.復(fù)選框和單選按鈕應(yīng)用輸入框組時(shí)，如果需要使用復(fù)選框和單選按鈕，則需要將任何復(fù)選框或單選選項(xiàng)放置在輸入組的加載項(xiàng)中，而不是文本中。4.輸入框添加按鈕使用輸入框組時(shí)，只需要在添加了.input-group類后，直接添加<button>即可。5.帶下拉列表的按鈕使用輸入框組時(shí)，只需要在添加了.input-group類后，直接添加<button>即可。Bootstrap表單--輸入框組輸入框組的形態(tài)演示Bootstrap表單--輸入框組輸入框組的形態(tài)6.分段按鈕使用輸入框組時(shí)，既添加按鈕<button>，又連續(xù)添加帶下拉列表的按鈕，即可實(shí)現(xiàn)分段按鈕。7.自定義下拉列表框表單輸入組包括對(duì)自定義選擇和自定義文件輸入的支持，不支持這些瀏覽器的默認(rèn)版本。8.自定義文件（file）輸入框輸入框組包括<inputtype="file">即可實(shí)現(xiàn)自定義文件（file）輸入框。演示表單浮動(dòng)標(biāo)簽與表單驗(yàn)證4Bootstrap表單--表單浮動(dòng)標(biāo)簽表單浮動(dòng)標(biāo)簽1.<input>輸入框浮動(dòng)標(biāo)簽?zāi)J(rèn)情況下，標(biāo)簽<lable>內(nèi)容一般顯示在<input>輸入框的上方，使用浮動(dòng)標(biāo)簽，可以在input輸入框內(nèi)插入標(biāo)簽，在單擊input輸入框時(shí)使它們浮動(dòng)到上方。在.form-floating中包裝一對(duì)<inputclass="form-control">

和

<label>元素，以使用Bootstrap的文本表單字段啟用浮動(dòng)標(biāo)簽。由于CSS-only浮動(dòng)標(biāo)簽的方法使用:placeholder-shown偽元素，因此在每個(gè)<input>上都需要一個(gè)placeholder。還要注意<input>必須放在第一位，這樣就可以使用同級(jí)選擇器。2.<textarea>文本框浮動(dòng)效果默認(rèn)情況下，標(biāo)簽<lable>內(nèi)容一般顯示在<input>輸入框的上方，使用浮動(dòng)標(biāo)簽，可以在textarea文本框內(nèi)插入標(biāo)簽，在單擊textarea輸入框時(shí)使它們浮動(dòng)到上方。在文本框浮動(dòng)效果時(shí)<textarea>需要自定義高度，不要使用rows屬性，而是設(shè)置一個(gè)顯式

height。3.<select>選擇菜單浮動(dòng)效果在選擇菜單上使用浮動(dòng)標(biāo)簽，它將始終顯示在選擇菜單的左上角，不會(huì)有點(diǎn)擊浮動(dòng)效果。Bootstrap表單--表單浮動(dòng)標(biāo)簽表單浮動(dòng)標(biāo)簽分辨率小于768像素時(shí)呈現(xiàn)的效果

分辨率大于等于768像素時(shí)呈現(xiàn)的效果演示Bootstrap表單--表單驗(yàn)證表單驗(yàn)證Bootstrap實(shí)現(xiàn)表單驗(yàn)證時(shí)，主要使用.was-validated類或.needs-validation類添加到<form>元素中，input輸入字段將具有綠色（有效）或紅色（無(wú)效）邊框效果，用于說(shuō)明表單是否需要輸入內(nèi)容。表單中使用.was-validated類時(shí)，表單在提交之前需要填寫(xiě)的內(nèi)容，