Bootstrap表單制作代碼
本文實(shí)例為大家分享了Bootstrap表單布局的具體代碼,供大家參考,具體內(nèi)容如下
Bootstrap 提供了下列類型的表單布局:
垂直表單(默認(rèn))
內(nèi)聯(lián)表單
水平表單
小妞妞做的表單實(shí)例:
<!DOCTYPE html> <html> <head> <title>Bootstrap 教學(xué)意見調(diào)查表</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css" rel="external nofollow" > <style> body { padding-top: 150px; padding-bottom: 40px; background-color: #D0E9C6; font-family: '楷體'; font-size: 22px; } .col-sm-2 control-label.form-control{ position: relative; height: 60px; -moz-box-sizing: border-box; box-sizing: border-box; } .form-horizontal{ max-width:800px; padding: 15px; margin: 0 auto; } </style> </head> <body> <div class="container"> <form class="form-horizontal" role="form" action="#" method="post"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">名字</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="請輸入名字"> </div> </div> <div class="form-group"> <label for="class" class="col-sm-2 control-label">班級</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="請輸入班級"> </div> </div> <div class="form-group"> <label for="Student ID" class="col-sm-2 control-label">學(xué)號</label> <div class="col-sm-10"> <input type="text" class="form-control" id="Student ID" placeholder="請輸入學(xué)號"> </div> </div> <div class="form-group"> <label for="kemu" class="col-sm-2 control-label">科目名稱</label> <div class="col-sm-10"> <input type="text" class="form-control" id="kemu" placeholder="請輸入科目名稱"> </div> </div> <div class="form-group"> <label for="name2" class="col-sm-2 control-label">意見</label> <div class="col-sm-10"> <input type="text" class="form-control" rows="3"> </div> </div> <div align="center"> <input type="submit" class="btn-success" style="border-radius:5px; width: 120px;" value="提交" /> <input type="button" class="btn-info" style="border-radius:5px; width: 120px;" value="取消" /> </div> </form> </div> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果圖:
參考地址:http://www.w3cschool.cn/bootstrap/bootstrap-v2-forms.html
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- 全面解析Bootstrap表單使用方法(表單按鈕)
- 詳解Bootstrap創(chuàng)建表單的三種格式(一)
- 全面解析Bootstrap表單使用方法(表單樣式)
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動完成表單
- 基于jQuery.validate及Bootstrap的tooltip開發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理(推薦)
相關(guān)文章
js實(shí)現(xiàn)圖片在未加載完成前顯示加載中字樣
首先判斷瀏覽器再判斷圖片是否加載完成,如果還未加載就顯示“加載中...”,思路及代碼如下2014-09-09BootStrap table實(shí)現(xiàn)表格行拖拽效果
這篇文章主要為大家詳細(xì)介紹了BootStrap table實(shí)現(xiàn)表格行拖拽效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12再也不怕 JavaScript 報(bào)錯了,怎么看怎么處理都在這兒
這篇文章主要介紹了再也不怕 JavaScript 報(bào)錯了,怎么看怎么處理都在這兒,需要的朋友可以參考下2020-12-12解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法
今天小編就為大家分享一篇解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08該如何加載google-analytics(或其他第三方)的JS
很多網(wǎng)站為了獲取用戶訪問網(wǎng)站的統(tǒng)計(jì)信息,使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google-analytics,簡稱ga)。2010-05-05