Bootstrap表单控件使用方法详解

更新时间：2017年01月11日 11:33:58 作者：小鱼儿_zhang

Bootstrap让Web开发更迅速、更简单，这篇文章主要为大家详细介绍了Bootstrap表单控件，用来与用户做交流的一个网页控件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

 <!-- 使用最新的浏览器内核解析 -->
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <!-- 移动设备优先 -->
 <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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <scri></script>
 <![<endifdiv class="form-group"></endifdiv>]-->
 </head>
 <body>
 <div class="container">
 <!-- 
  表单的栅格系统使用 form-horizontal
  div的栅格系统使用 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">学历：</label>
  <div class="col-md-10">
  <div class="radio">
  <label class="radio-inline">
   <input name="raido" type="radio">中学</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>

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JavaScript日期工具类DateUtils定义与用法示例
这篇文章主要介绍了JavaScript日期工具类DateUtils定义与用法,涉及javascript针对日期时间的获取、转换、比较、运算等相关操作技巧,需要的朋友可以参考下
2018-09-09
详解JavaScript原型与原型链
这篇文章主要介绍了JavaScript原型与原型链的相关资料，帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下
2020-11-11
webpack3.0升级4.0的方法步骤
这篇文章主要介绍了webpack3.0升级4.0的方法步骤,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-04-04
JS控制TreeView的结点选择
这篇文章主要为大家详细介绍了JS控制TreeView的结点选择,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
javascript获取flash版本号的方法
这篇文章主要介绍了javascript获取flash版本号的方法,以实例形式分析了javascript判断用户是否安装了Flash及获取Flash版本号的方法,具有一定的实用价值,需要的朋友可以参考下
2014-11-11
微信小程序实现动态获取元素宽高的方法分析
这篇文章主要介绍了微信小程序实现动态获取元素宽高的方法,结合实例形式分析了微信小程序动态获取、设置元素宽高的相关操作技巧与注意事项,需要的朋友可以参考下
2018-12-12
JavaScript DOMContentLoaded事件案例详解
这篇文章主要介绍了JavaScript DOMContentLoaded事件案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
JavaScript中数组去重的办法总结
你是否在面试的过程中被考到过给你一个数组让你去掉重复项呢，下面小编就来总结一下对于数组去重这道简单的面试题时，我们可以回答的方法有什么吧
2023-06-06
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
这篇文章主要介绍了详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-09-09
Javascript实现数组中的元素上下移动
这篇文章主要给大家介绍了Javascript实现数组中的元素上下移动的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
2017-04-04