Bootstrap表单控件使用方法详解

www.111cn.net 更新:2017-01-11 编辑:kepeer 来源:转载
小编推荐的这篇文章介绍了Bootstrap表单控件使用方法详解,有需要的同学可以参考研究一下

表单作为Bootstrap的核心内容,主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。

<!DOCTYPE html>

<htmllang="en">

 <head>

  <metacharset="utf-8">

 

  <!-- 使用最新的浏览器内核解析 -->

  <metahttp-equiv="X-UA-Compatible"content="IE=edge">

  <!-- 移动设备优先 -->

  <metaname="viewport"content="width=device-width, initial-scale=1">

 

  <!-- Bootstrap CSS -->

  <linkrel="stylesheet"href="bootstrap/css/bootstrap.min.css">

 

  <!--[if lt IE 9]>

   <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

   <scri></script>

  <![<endifdiv class="form-group"></endifdiv>]-->

 </head>

 <body>

 <divclass="container">

 <!--

   表单的栅格系统使用 form-horizontal

   div的栅格系统使用 row

  -->

 <formclass="form-horizontal">

  <divclass="form-group">

   <labelclass="col-md-2 control-label"for="username">用户名:</label>

 

   <divclass="col-md-10">

    <inputid="username"class="form-control"type="text"name="username"value=""placeholder="请输入用户名"></input>

   </div>

  </div>

  <divclass="form-group">

   <labelclass="col-md-2 control-label"for="password">密 码:</label>

   <divclass="col-md-10">

   <inputid="password"class="form-control"type="password"name="password"value=""placeholder="请输入用密码"></input>

   </div>

  </div>

 

  <divclass="form-group">

   <labelclass="col-md-2 control-label"for="file">上传文件:</label>

   <divclass="col-md-10">

   <inputid="file"type="file"name="file"value=""></input>

   </div>

  </div>

 

  <divclass="form-group">

   <labelclass="col-md-2 control-label">爱好:</label>

   <divclass="col-md-10">

   <divclass="checkbox">

    <labelclass="checkbox-inline">

     <inputtype="checkbox">画画</input>

    </label>

 

    <labelclass="checkbox-inline">

     <inputtype="checkbox">音乐</input>

    </label>

 

    <labelclass="checkbox-inline">

     <inputtype="checkbox">体育</input>

    </label>

   </div>

   </div> 

  </div>

 

   <divclass="form-group">

   <labelclass="col-md-2 control-label">学历:</label>

   <divclass="col-md-10">

   <divclass="radio">

    <labelclass="radio-inline">

     <inputname="raido"type="radio">中学</input>

    </label>

 

    <labelclass="radio-inline">

     <inputname="raido"type="radio">大专</input>

    </label>

 

    <labelclass="radio-inline">

     <inputname="raido"type="radio">研究生</input>

    </label>

   </div>  

   </div>

  </div>

 

  <divclass="form-group">

   <labelclass="col-md-2 control-label">个人简历</label>

   <divclass="col-md-10">

   <textareaclass="form-control"name="person"rows="5"placeholder="请输入">

 

 

   </textarea>

   </div>

  </div>

 

  <divclass="col-md-10 col-md-offset-2">

  <buttontype="button"class="btn btn-success">提交表单</button>

 </div>

 </form>

 

 

 </div>

 

 

  <!-- jQuery first, then Bootstrap JS. -->

  <scriptsrc="bootstrap/js/jquery.min.js"></script>

  <scriptsrc="bootstrap/js/bootstrap.js"></script>

 </body>

</html>

没有了123 下一篇
上一页:没有了      下一页:理解javascript中的闭包的教程

相关内容

    暂无与此文章相关内容