文稿案例教案

4章表單和學(xué)習(xí)要點(diǎn)表

主講教師：本課程由北風(fēng)網(wǎng)和瓢城 一．表單Bootstrap提供了一些豐富的表單樣式供開(kāi)發(fā)者使用基本格式//實(shí)現(xiàn)基本的表單樣<label>電子郵件<inputtype=""class="form-placeholder="請(qǐng)輸入您的電子郵件<label>placeholder="請(qǐng)輸入您的注：只有正確設(shè)置了輸入框的type類型，才能被賦予正確的樣式。支持的輸入框控件包 和color。內(nèi)聯(lián)表單//讓表單左對(duì)齊浮動(dòng)，并表現(xiàn)為inline-block內(nèi)聯(lián)塊結(jié)注：當(dāng)小于768px，會(huì)恢復(fù)獨(dú)占樣表單合組//前后增加片水平排列//讓表單內(nèi)的元素保持水平<inputtype=""class="form-control"placeholder="請(qǐng)輸注：這里用到了col-sm柵格系統(tǒng)，后面章節(jié)會(huì)重點(diǎn)講解，而control-label表示和父復(fù)選框和單選框//設(shè)置復(fù)選框，在一<div<div//設(shè)置禁用的復(fù)選<divclass="checkbox//設(shè)置內(nèi)聯(lián)一行顯示的復(fù)選<labelclass="checkbox-inline//設(shè)置單選<divclass="radio<inputtype="radioname="sexdisabled>下拉列表//設(shè)置下拉列校驗(yàn)狀態(tài)//設(shè)置為錯(cuò)誤狀<divclass="form-grouphas-注：還有其他狀態(tài)如樣說(shuō)has-錯(cuò)誤狀has-成功狀has-警//label同步相應(yīng)狀<labelclass="control-label">Inputwith添加額外的圖//文本框右側(cè)內(nèi)置文本圖<divclass="form-grouphas-<label>電子郵件<inputtype=""class="form-<spanclass="glyphiconglyphicon-okform-control-注：除了glyphicon-ok外，還有幾個(gè)如下樣說(shuō)glyphicon-成功狀glyphicon-warning-警glyphicon-錯(cuò)誤狀//從大到<inputtype="password"class="form-controlinput-<inputtype="password"class="form-controlinput-注：也可以設(shè)置父元 form-group-lg、form-group-sm，來(lái)調(diào)整二．Bootstrap提供了一些豐富的樣式供開(kāi)發(fā)者使用1.形//三種形<imgsrc="img/pic.png"alt=""class="img-<imgsrc="img/pic.png"alt=""class="img-<imgsrc="img/pic.png"alt=""class="img-//<imgsrc="img/pi