bootstrap表單範例程式碼分享，bootstrap範例程式碼

bootstrap表單範例程式碼分享，bootstrap範例程式碼

本文執行個體為大家分享了bootstrap表單的具體代碼，供大家參考，具體內容如下

<!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> <!--內聯表單--> <form class="form-inline"><!--當螢幕小於768時，變為兩行-->  <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="請輸入整數" class="form-control">   <div class="input-group-addon">元</div>  </div> </form> <!--水平表單--> <form class="form-horizontal"><!--當螢幕小於768時，變為兩行-->  <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> <!--複選框--> <form>  <input type="checkbox">體育  <input type="checkbox">音樂   <label>   <input type="checkbox">體育  </label>  <label>   <input type="checkbox">音樂  </label> <!--基本複選框和複選框設定禁用-->  <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> <!--內聯複選框--><!--複選框用法和單選框一樣的-->   <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> <!--校正狀態--> <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> 

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。