【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）
生活随笔
收集整理的這篇文章主要介紹了
【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
功能需求
利用bootstrap實(shí)現(xiàn)html頁面的美化，包括：文本輸入框、單選框、多選框、下拉框、按鈕相關(guān)樣式。
技術(shù)介紹
Bootstrap是Twitter推出的一個(gè)用于前端開發(fā)的開源工具包。簡潔、直觀、強(qiáng)悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。
界面原型
代碼實(shí)現(xiàn)
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表單練習(xí)</title><!-- 引入外部第三方css文件，rel固定值：樣式表，href鏈接地址.min意思最小文件，壓縮（把文件所有內(nèi)容換行和空格縮進(jìn)都去掉）一行，文件相對比較小120988 英文字格式--><link rel="stylesheet" href="css/bootstrap.min.css" /></head><body><form id="stuForm" method="post" action="http://localhost:8080/stumis/student"><div class="container"><h3>學(xué)生信息管理系統(tǒng)mis</h3><div class="form-group"><!-- lable標(biāo)簽 for屬性光標(biāo)定位，點(diǎn)擊后可以對應(yīng)id的框 --><label for="name">姓名：</label><!-- 文本輸入框，h5新特性placeholder屬性 --><input type="text" name="name" id="name"class="form-control"placeholder="請輸入姓名..."/></div><div class="form-group"><label for="age">年齡：</label><input type="number" name="age" id="age"class="form-control"placeholder="請輸入年齡..."/></div><div class="form-group"><label for="sex">性別：（單選框）</label><!-- radio互斥，同名會(huì)只能選擇一個(gè) --> <label class="radio-inline"><input type="radio" name="sex" id="sex" checked="checked" value="1"/> 男</label><label class="radio-inline"><input type="radio" name="sex" id="sex" value="0"/> 女</label></div><div class="form-group"><label for="hobby">愛好：（多選）</label><label class="checkbox-inline"><input type="checkbox" checked="checked" name="hobby" id="hobby" value="1"/> 乒乓球</label><label class="checkbox-inline"><input type="checkbox" name="hobby" id="hobby" value="2"/> 爬山</label><label class="checkbox-inline"><input type="checkbox" name="hobby" id="hobby" value="3"/> 唱歌</label></div><div class="form-group"><label>學(xué)歷：（下拉框）</label><!-- 單選，選擇“幼兒園”，表單提交“1”，性能高--><select name="edu" id="edu"><option value="1">幼兒園</option><option value="2">小學(xué)</option><option value="3">初中</option><option value="4">高中</option><option value="5">大專</option><option value="6" selected="selected">本科</option><option value="7">研究生</option><option value="8">博士</option></select></div><div class="form-group"><!-- class屬性支持多個(gè)樣式，樣式之間空格隔開 --><input class="btn btn-primary" type="button" id="btnSave" value="保存" onclick="doSubmit()"/><button class="btn btn-danger" id="btnClear">取消</button></div></div></form></body><script>function doSubmit(){var form = document.getElementById('stuForm');form.submit();}</script> </html>總結(jié)
以上是生活随笔為你收集整理的【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最近新发现的歌谱排版软件Lilypond
- 下一篇： Python春节特训营03：打倒拦路虎，