本篇文章给大家分享的是有关如何在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>
以上就是如何在Bootstrap中使用表单控件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注天达云行业资讯频道。