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

bootstrap表單示例代碼分享

 更新時間：2017年05月18日 17:20:03   作者：YY小蘋果  
這篇文章主要為大家詳細介紹了bootstrap表單示例代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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="請輸入用戶名"> 
 
 <label>密碼：</label> 
 <input type="password" placeholder="請輸入密碼"> 
</form> 
<form> 
 <label>用戶名：</label> 
 <input type="text" placeholder="請輸入用戶名" class="form-control"> 
 
 <label>密碼：</label> 
 <input type="password" placeholder="請輸入密碼" class="form-control"> 
</form> 
<!--基本表單--> 
<form> 
 <div class="form-group"> 
  <label>用戶名：</label> 
  <input type="text" placeholder="請輸入用戶名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密碼：</label> 
  <input type="password" placeholder="請輸入密碼" class="form-control"> 
 </div> 
</form> 
<!--內(nèi)聯(lián)表單--> 
<form class="form-inline"><!--當屏幕小于768時，變?yōu)閮尚?-> 
 <div class="form-group"> 
  <label>用戶名：</label> 
  <input type="text" placeholder="請輸入用戶名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密碼：</label> 
  <input type="password" placeholder="請輸入密碼" class="form-control"> 
 </div> 
</form> 
<!--加入input-group-addon--> 
<form class="form-inline"> 
 <div class="form-group"> 
  <label>用戶名：</label> 
  <input type="text" placeholder="請輸入用戶名" class="form-control"> 
 </div> 
 
 <div class="form-group"> 
  <label>密碼：</label> 
  <input type="password" placeholder="請輸入密碼" class="form-control"> 
 </div> 
 
 <div class="input-group"> 
  <div class="input-group-addon">￥</div> 
  <input type="number" placeholder="請輸入整數(shù)" class="form-control"> 
  <div class="input-group-addon">元</div> 
 </div> 
</form> 
<!--水平表單--> 
<form class="form-horizontal"><!--當屏幕小于768時，變?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="請輸入用戶名" 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="請輸入密碼" 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">音樂 
 
 <label> 
  <input type="checkbox">體育 
 </label> 
 <label> 
  <input type="checkbox">音樂 
 </label> 
<!--基本復(fù)選框和復(fù)選框設(shè)置禁用--> 
 <div class="checkbox"> 
  <label> 
   <input type="checkbox">體育 
  </label> 
 </div> 
 <div class="checkbox"> 
  <label> 
   <input type="checkbox">音樂 
  </label> 
 </div> 
 <div class="checkbox disabled"> 
  <label> 
   <input type="checkbox" disabled>愛好 
  </label> 
 </div> 
<!--內(nèi)聯(lián)復(fù)選框--><!--復(fù)選框用法和單選框一樣的--> 
  <label class="checkbox-inline"> 
   <input type="checkbox">體育 
  </label> 
  <label class="checkbox-inline"> 
   <input type="checkbox">音樂 
  </label> 
  <label class="checkbox-inline disabled"> 
   <input type="checkbox" disabled>愛好 
  </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> 
<!--校驗狀態(tài)--> 
<form> 
 <div class="form-group has-success has-feedback"> 
  <label class="control-label">用戶名：</label> 
  <input type="text" placeholder="請輸入用戶名" class="form-control"> 
  <span class="glyphicon glyphicon-ok form-control-feedback"></span> 
 </div> 
 <div class="form-group"> 
  <label>密碼：</label> 
  <input type="password" placeholder="請輸入密碼" 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    JS模擬超市簡易收銀臺小程序代碼解析

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

    滾動條響應(yīng)鼠標滑輪事件實現(xiàn)上下滾動的js代碼

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

    js繪制購物車拋物線動畫

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

最新評論