在页面制作时，我们往往需要制作一些表单，使用bootstrap制作表单不仅更加快速而且样式也是比较好看的。当然如果想加入其他样式的话，大家可以执行设计css样式。
代码展示：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<title>表单+按钮</title>
<style>
body{
padding-top: 50px;
}
</style>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-md-2 control-label">用户名</label>
<div class="col-md-10">
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">密码</label>
<div class="col-md-10">
<input type="password" class="form-control" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">e-mail</label>
<div class="col-md-10">
<input type="e-mail" class="form-control" placeholder="输入电子邮件地址">
</div>
</div>
<div class="form-group">
<label class="col-md-1 col-md-offset-1 control-label">选择文档</label>
<div class="col-md-10">
<input type="file" class="form-control">
<p class="help-block">选择你需要的文件</p>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">对文档进行描述</label>
<div class=" col-md-10 ">
<textarea class="form-control" rows="5">可以输入五行哦</textarea>
<p class="form-control-static">请按照文档要求进行编写</p>
</div>
</div>
<div class="radio col-md-offset-2">
<label class="col-md-2">
<input name="sex" type="radio" checked="checked" />女
</label>
<label>
<input name="sex" type="radio" />男
</label>
</div>
<!--multiple="multiple"可以展开下拉框-->
<select class="col-md-offset-2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div class="form-group">
<div class="col-md-10 col-md-offset-2 ">
<input type="checkBox">记住密码
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-1 ">
<button type="button" class="btn btn-primary">普通按钮primary</button>
</div>
<div class="col-md-2 col-md-offset-1 ">
<button type="button" class="btn btn-default">普通按钮default</button>
</div>
<div class="col-md-2 col-md-offset-1 ">
<button type="button" class="btn btn-info">普通按钮info</button>
</div>
<div class="col-md-2 col-md-offset-1 ">
<button type="button" class="btn btn-success">普通按钮success</button>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-2 ">
<button type="submit" class="btn btn-warning">提交</button>
</div>
<div class="col-md-4 col-md-offset-2 ">
<button type="reset" class="btn btn-danger">重置</button>
</div>
</div>
</form>
</div>
</body>
</html>
图片展示：
（其中点击选择文档可以跳出电脑系统自带的文件选择界面，从这个我们可以看出bootstrap框架的方便之处）
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
