bootstrap 基础表单 内联表单 横向表单
<!DOCTYPE html>
<html> <head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">
</head> <body>
<p class="btn-primary">基础表单</p>
<form>
<fieldset>
<legend>User Login</legend>
<div class="form-group">
<label for="">User</label>
<input type="email" class="form-control" placeholder="this is email input">
</div>
<div class="form-group">
<label for="">Pass</label>
<input type="password" class="form-control" placeholder="this is for password">
</div>
<div class="checkbox">
<label for="">
<input type="checkbox">ABC</input>
</label>
</div>
<button type="submit" class="btn btn-default">Login</button>
</fieldset>
</form>
<p class="btn-primary">内联表单</p>
<form class="form-inline">
<div class="form-group">
<label for="">User</label>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="this is for user">
</div>
<div class="checkbox">
<label for="chk2">
<input id="chk2" type="checkbox">Remember Pass</label>
</div>
<button type="submit" class="btn btn-default">Login</button>
</form>
<p class="btn-primary">横向表单</p>
<form action="" class="form-horizontal" role="form">
<div class="form-group">
<label for="account" class="col-sm-2 control-label">UserName</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="account" placeholder="account place holder">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label for="chk">
<input id="chk" type="checkbox">remember me</label>
</div>
</div>
</div>
</form>
<script type="text/javascript" src="dist/jQuery/jquery-1.11.3.js"></script>
<script type="text/javascript" src="dist/js/bootstrap.js"></script>
</body> </html>