【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）
生活随笔
收集整理的這篇文章主要介紹了
【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
功能需求
利用bootstrap實現html頁面的美化，包括：文本輸入框、單選框、多選框、下拉框、按鈕相關樣式。
技術介紹
Bootstrap是Twitter推出的一個用于前端開發的開源工具包。簡潔、直觀、強悍的前端開發框架，讓web開發更迅速、簡單。
界面原型
代碼實現
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>表單練習</title><!-- 引入外部第三方css文件，rel固定值：樣式表，href鏈接地址.min意思最小文件，壓縮（把文件所有內容換行和空格縮進都去掉）一行，文件相對比較小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>學生信息管理系統mis</h3><div class="form-group"><!-- lable標簽 for屬性光標定位，點擊后可以對應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互斥，同名會只能選擇一個 --> <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>學歷：（下拉框）</label><!-- 單選，選擇“幼兒園”，表單提交“1”，性能高--><select name="edu" id="edu"><option value="1">幼兒園</option><option value="2">小學</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屬性支持多個樣式，樣式之間空格隔開 --><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>總結
以上是生活随笔為你收集整理的【小白学前端】化腐朽为神奇-Bootstrap实现表单美化（day02-6）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最近新发现的歌谱排版软件Lilypond
- 下一篇： 【HTML/CSS】表单美化