Bootstrap CSS入门初步学习---表单+按钮

在页面制作时，我们往往需要制作一些表单，使用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框架的方便之处）

在这里插入图片描述

Bootstrap CSS入门初步学习---表单+按钮

相关文章