欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

bootstrap表單示例代碼分享

 更新時(shí)間：2017年05月18日 17:20:03   作者：YY小蘋果  
這篇文章主要為大家詳細(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>用戶名：</label> 
 <input type="text" placeholder="請(qǐng)輸入用戶名"> 
 
 <label>密碼：</label> 
 <input type="password" placeholder="請(qǐng)輸入密碼"> 
</form> 
<form> 
 <label>用戶名：</label> 
 <input type="text" placeholder="請(qǐng)輸入用戶名" class="form-control"> 
 
 <label>密碼：</label> 
 <input type="password" placeholder="請(qǐng)輸入密碼" class="form-control"> 
</form> 
<!--基本表單--> 
<form> 
 <div class="form-group"> 
  <label>用戶名：</label> 
  <input type="text" placeholder="請(qǐng)輸入用戶名" 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>用戶名：</label> 
  <input type="text" placeholder="請(qǐng)輸入用戶名" 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>用戶名：</label> 
  <input type="text" placeholder="請(qǐng)輸入用戶名" 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>用戶名：</label> 
  </div> 
  <div class="col-sm-10"> 
   <input type="text" placeholder="請(qǐng)輸入用戶名" 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">用戶名：</label> 
  <input type="text" placeholder="請(qǐng)輸入用戶名" 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í)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解ES6?中的迭代器和生成器

    詳解ES6?中的迭代器和生成器

    迭代器是一個(gè)統(tǒng)一的接口，它的作用是使各種數(shù)據(jù)結(jié)構(gòu)可以被便捷的訪問(wèn)，它是通過(guò)一個(gè)鍵為Symbol.iterator的方法來(lái)實(shí)現(xiàn)，這篇文章主要介紹了ES6?中的迭代器和生成器,需要的朋友可以參考下
    2022-08-08
  • JS XMLHttpRequest原理與使用方法深入詳解

    JS XMLHttpRequest原理與使用方法深入詳解

    這篇文章主要介紹了JS XMLHttpRequest原理與使用方法,結(jié)合實(shí)例形式深入分析了JS XMLHttpRequest相關(guān)原理、使用方法及操作注意事項(xiàng),需要的朋友可以參考下
    2020-04-04
  • Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單

    Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單

    Bootstrap每天必學(xué)之級(jí)聯(lián)下拉菜單，主要應(yīng)用場(chǎng)合有省市級(jí)關(guān)聯(lián)菜單等，感興趣的小伙伴們可以參考一下
    2016-03-03
  • JavaScript JSON.stringify()的使用總結(jié)

    JavaScript JSON.stringify()的使用總結(jié)

    JSON是一種輕量級(jí)數(shù)據(jù)格式，可以方便地表示復(fù)雜數(shù)據(jù)結(jié)構(gòu)。JSON對(duì)象有兩個(gè)方法：stringify()和parse()。在簡(jiǎn)單的情況下，這兩個(gè)方法分別可以將JavaScript序列化為JSON字符串，以及將JSON解析為原生JavaScript值。本文著重介紹JSON.stringify()的使用方法和注意事項(xiàng)。
    2021-05-05
  • js獲取當(dāng)前頁(yè)面的url網(wǎng)址信息

    js獲取當(dāng)前頁(yè)面的url網(wǎng)址信息

    這篇文章主要介紹了通過(guò)js如何獲取當(dāng)前頁(yè)面的url網(wǎng)址信息,需要的朋友可以參考下
    2014-06-06
  • Javascript處理DOM元素事件實(shí)現(xiàn)代碼

    Javascript處理DOM元素事件實(shí)現(xiàn)代碼

    DOM元素都有一些標(biāo)準(zhǔn)事件，一般使用時(shí)只要使用onclick=function的方式就可以了，但是當(dāng)需要為DOM元素添加多個(gè)事件，刪除事件，或在用Javascript封裝控件的時(shí)候，為封裝的控件添加自定義事件的時(shí)候
    2012-05-05
  • 寫的htc的數(shù)據(jù)表格

    寫的htc的數(shù)據(jù)表格

    寫的htc的數(shù)據(jù)表格...
    2007-01-01
  • JS模擬超市簡(jiǎn)易收銀臺(tái)小程序代碼解析

    JS模擬超市簡(jiǎn)易收銀臺(tái)小程序代碼解析

    本文通過(guò)實(shí)例代碼給大家介紹了JS模擬超市簡(jiǎn)易收銀臺(tái)小程序代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的的朋友參考下吧
    2017-08-08
  • 滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼

    滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼

    javascript實(shí)現(xiàn)滾動(dòng)條響應(yīng)鼠標(biāo)滑輪的實(shí)現(xiàn)上下滾動(dòng)，示例代碼如下
    2014-06-06
  • js繪制購(gòu)物車拋物線動(dòng)畫

    js繪制購(gòu)物車拋物線動(dòng)畫

    這篇文章主要為大家詳細(xì)介紹了js繪制購(gòu)物車拋物線動(dòng)畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2016-09-09

最新評(píng)論