bootstrap表單示例代碼分享
更新時(shí)間：2017年05月18日 17:20:03 作者：YY小蘋(píng)果
這篇文章主要為大家詳細(xì)介紹了bootstrap表單示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了bootstrap表單的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <title>表單和圖片</title> <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css" rel="external nofollow" > <link rel="stylesheet" href="css/main.css" rel="external nofollow" > <!--[if lt IE 9]> <script src="lib/html5shiv/html5shiv.min.js"></script> <script src="lib/respond/respond.min.js"></script> <![endif]--> </head> <body> <form> <label>用戶(hù)名：</label> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名"> <label>密碼：</label> <input type="password" placeholder="請(qǐng)輸入密碼"> </form> <form> <label>用戶(hù)名：</label> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="form-control"> <label>密碼：</label> <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> </form> <!--基本表單--> <form> <div class="form-group"> <label>用戶(hù)名：</label> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="form-control"> </div> <div class="form-group"> <label>密碼：</label> <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> </div> </form> <!--內(nèi)聯(lián)表單--> <form class="form-inline"><!--當(dāng)屏幕小于768時(shí)，變?yōu)閮尚?-> <div class="form-group"> <label>用戶(hù)名：</label> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="form-control"> </div> <div class="form-group"> <label>密碼：</label> <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> </div> </form> <!--加入input-group-addon--> <form class="form-inline"> <div class="form-group"> <label>用戶(hù)名：</label> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="form-control"> </div> <div class="form-group"> <label>密碼：</label> <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> </div> <div class="input-group"> <div class="input-group-addon">￥</div> <input type="number" placeholder="請(qǐng)輸入整數(shù)" class="form-control"> <div class="input-group-addon">元</div> </div> </form> <!--水平表單--> <form class="form-horizontal"><!--當(dāng)屏幕小于768時(shí)，變?yōu)閮尚?-> <div class="form-group"> <div class="col-sm-2 control-label"> <label>用戶(hù)名：</label> </div> <div class="col-sm-10"> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="form-control"> </div> </div> <div class="form-group"> <div class="col-sm-2 control-label"> <label>密碼：</label> </div> <div class="col-sm-10"> <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> </div> </div> </form> <!--文本域--> <form> <textarea rows="3"></textarea> </form> <form> <div class="form-group"> <label>文本域</label> <textarea rows="3" class="form-control"></textarea> </div> </form> <!--復(fù)選框--> <form> <input type="checkbox">體育 <input type="checkbox">音樂(lè) <label> <input type="checkbox">體育 </label> <label> <input type="checkbox">音樂(lè) </label> <!--基本復(fù)選框和復(fù)選框設(shè)置禁用--> <div class="checkbox"> <label> <input type="checkbox">體育 </label> </div> <div class="checkbox"> <label> <input type="checkbox">音樂(lè) </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" disabled>愛(ài)好 </label> </div> <!--內(nèi)聯(lián)復(fù)選框--><!--復(fù)選框用法和單選框一樣的--> <label class="checkbox-inline"> <input type="checkbox">體育 </label> <label class="checkbox-inline"> <input type="checkbox">音樂(lè) </label> <label class="checkbox-inline disabled"> <input type="checkbox" disabled>愛(ài)好 </label> </form> <!--下拉框--> <form> <select> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </form> <!--校驗(yàn)狀態(tài)--> <form> <div class="form-group has-success has-feedback"> <label class="control-label">用戶(hù)名：</label> <input type="text" placeholder="請(qǐng)輸入用戶(hù)名" class="form-control"> <span class="glyphicon glyphicon-ok form-control-feedback"></span> </div> <div class="form-group"> <label>密碼：</label> <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> </div> </form> <script src="lib/jquery/jquery.js"></script> <script src="lib/bootstrap/js/bootstrap.js"></script> <script src="js/main.js"></script> </body> </html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 基于Bootstrap+jQuery.validate實(shí)現(xiàn)Form表單驗(yàn)證
- Bootstrap實(shí)現(xiàn)登錄校驗(yàn)表單(帶驗(yàn)證碼)
- 詳解Bootstrap創(chuàng)建表單的三種格式（一）
- JS組件Form表單驗(yàn)證神器BootstrapValidator
- 全面解析Bootstrap表單使用方法（表單按鈕）
- 全面解析Bootstrap表單使用方法（表單樣式）
- 實(shí)用又漂亮的BootstrapValidator表單驗(yàn)證插件
- 基于bootstrap插件實(shí)現(xiàn)autocomplete自動(dòng)完成表單
- 基于jQuery.validate及Bootstrap的tooltip開(kāi)發(fā)氣泡樣式的表單校驗(yàn)組件思路詳解
- Bootstrap中的表單驗(yàn)證插件bootstrapValidator使用方法整理（推薦）
相關(guān)文章
微信小程序?qū)崿F(xiàn)分類(lèi)菜單激活狀態(tài)隨列表滾動(dòng)而自動(dòng)切換效果詳解
這篇文章主要介紹了微信小程序分類(lèi)菜單激活狀態(tài)跟隨列表滾動(dòng)自動(dòng)切換，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01
通過(guò)實(shí)例解析JavaScript常用排序算法
這篇文章主要介紹了通過(guò)實(shí)例解析JavaScript常用排序算法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
JS如何獲取未來(lái)n天的時(shí)間(返回日期:yyyy-mm-dd,并且判斷是否是今天和星期)
開(kāi)發(fā)中經(jīng)常遇到獲取時(shí)間的業(yè)務(wù),將常用的方法做個(gè)筆記記錄下,對(duì)JS如何獲取未來(lái)n天的時(shí)間相關(guān)知識(shí)感興趣的朋友一起看看吧2024-03-03
跟我學(xué)習(xí)javascript的作用域與作用域鏈
跟我學(xué)習(xí)javascript的作用域與作用域鏈，感興趣的小伙伴們可以參考一下2015-11-11
SwfUpload在IE10上不出現(xiàn)上傳按鈕的解決方法
在測(cè)試中發(fā)現(xiàn)使用了SwfUpload實(shí)現(xiàn)的無(wú)刷新上傳功能，在IE10上竟然無(wú)法使用了，難道SwfUpload不支持嗎？下面與大家分享下通過(guò)修改SwfUplad.JS文件讓其支持ie102013-06-06
淺析TypeScript中的類(lèi)型檢查與錯(cuò)誤捕獲
類(lèi)型檢查是一種靜態(tài)分析的過(guò)程，用于驗(yàn)證變量、函數(shù)和表達(dá)式的類(lèi)型是否符合預(yù)期，這篇文章主要來(lái)和大家聊聊TypeScript中類(lèi)型檢查與錯(cuò)誤捕獲的相關(guān)知識(shí)，希望對(duì)大家有所幫助2023-06-06
TypeScript中交叉類(lèi)型和聯(lián)合類(lèi)型的區(qū)別詳解
聯(lián)合類(lèi)型（Union Types）和交叉類(lèi)型（Intersection Types）是 TypeScript 中的兩種高級(jí)類(lèi)型,它們都用于組合多個(gè)類(lèi)型并生成新的類(lèi)型,但它們兩者之間的用法不一樣,本文小編就給大家講講TypeScript中交叉類(lèi)型和聯(lián)合類(lèi)型的區(qū)別,需要的朋友可以參考下2023-09-09
JavaScript 判斷數(shù)據(jù)類(lèi)型的4種方法
這篇文章主要介紹了JavaScript 判斷數(shù)據(jù)類(lèi)型的4種方法，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下2020-09-09
本文給大家分享bootstrap輪播h tml代碼，代碼簡(jiǎn)單易懂非常不錯(cuò)，具有參考借鑒，需要的朋友參考下吧2016-12-12
Javascript中的方法鏈（Method Chaining）介紹
這篇文章主要介紹了Javascript中的方法鏈（Method Chaining）介紹,本文講解了Javascript Method Chaining、Method Chaining 使用、Method Chaining VS prototype Chaining等內(nèi)容,需要的朋友可以參考下2015-03-03