快捷導(dǎo)航

Bootstrap表單控件使用方法詳解

更新時間：2017年01月11日 11:33:58 作者：小魚兒_zhang

Bootstrap讓W(xué)eb開發(fā)更迅速、更簡單，這篇文章主要為大家詳細(xì)介紹了Bootstrap表單控件，用來與用戶做交流的一個網(wǎng)頁控件，具有一定的參考價值，感興趣的小伙伴們可以參考一下

表單作為Bootstrap的核心內(nèi)容，主要功能是用來與用戶做交流的一個網(wǎng)頁控件，良好的表單設(shè)計能夠讓網(wǎng)頁與用戶更好的溝通。

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">

 <!-- 使用最新的瀏覽器內(nèi)核解析 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 移動設(shè)備優(yōu)先 -->
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <!-- Bootstrap CSS -->
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

 <!--[if lt IE 9]>
  <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <scri></script>
 <![<endifdiv class="form-group"></endifdiv>]-->
 </head>
 <body>
 <div class="container">
 <!-- 
  表單的柵格系統(tǒng)使用 form-horizontal
  div的柵格系統(tǒng)使用 row
 -->
 <form class="form-horizontal">
 <div class="form-group">
  <label class="col-md-2 control-label" for="username">用戶名：</label>

  <div class="col-md-10">
  <input id="username" class="form-control" type="text" name="username" value="" placeholder="請輸入用戶名"></input>
  </div>
 </div>
 <div class="form-group">
  <label class="col-md-2 control-label" for="password">密 碼：</label>
  <div class="col-md-10">
  <input id="password" class="form-control" type="password" name="password" value="" placeholder="請輸入用密碼"></input>
  </div>
 </div>

 <div class="form-group">
  <label class="col-md-2 control-label" for="file">上傳文件：</label>
  <div class="col-md-10">
  <input id="file" type="file" name="file" value=""></input>
  </div>
 </div>

 <div class="form-group">
  <label class="col-md-2 control-label" >愛好：</label>
  <div class="col-md-10">
  <div class="checkbox">
  <label class="checkbox-inline">
   <input type="checkbox">畫畫</input>
  </label>

  <label class="checkbox-inline">
   <input type="checkbox">音樂</input>
  </label>

  <label class="checkbox-inline">
   <input type="checkbox">體育</input>
  </label>
  </div> 
  </div> 
 </div>

  <div class="form-group">
  <label class="col-md-2 control-label">學(xué)歷：</label>
  <div class="col-md-10">
  <div class="radio">
  <label class="radio-inline">
   <input name="raido" type="radio">中學(xué)</input>
  </label>

  <label class="radio-inline">
   <input name="raido" type="radio">大專</input>
  </label>

  <label class="radio-inline">
   <input name="raido" type="radio">研究生</input>
  </label>
  </div>  
  </div>
 </div>

 <div class="form-group">
  <label class="col-md-2 control-label">個人簡歷</label>
  <div class="col-md-10">
  <textarea class="form-control" name="person" rows="5" placeholder="請輸入">


  </textarea>
  </div>
 </div>

 <div class="col-md-10 col-md-offset-2">
 <button type="button" class="btn btn-success">提交表單</button>
 </div>
 </form>


 </div>


 <!-- jQuery first, then Bootstrap JS. -->
 <script src="bootstrap/js/jquery.min.js"></script>
 <script src="bootstrap/js/bootstrap.js"></script>
 </body>
</html>

如果大家還想深入學(xué)習(xí)，可以點擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實戰(zhàn)教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

您可能感興趣的文章: