Bootstrap 内联表单 form-inline
投稿于 被查看 24899 次 评论：172
Bootstrap 内联表单 form-inline
代码片段 1
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联表单</title>
<link type="text/css" rel="stylesheet" href="http://1.bilibilitime.sinaapp.com/bootstrap-3.2.0-dist/css/bootstrap.css">
<style type="text/css">
form{
margin: 10px 30px;
}
div label{
line-height: 34px;
}
</style>
</head>
<body>
<form class="form-inline" role="form">
<div class="form-group">
<label for="email">邮箱</label>
<input class="form-control" id="email" type="email" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input class="form-control" id="pwd" type="password" placeholder="请输入您的邮箱密码">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
</body>
</html>
内联表单:表单的控件都在一行内显示
与基本表单比较代码片段 2
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>内联表单</title>
<link type="text/css" rel="stylesheet" href="http://1.bilibilitime.sinaapp.com/bootstrap-3.2.0-dist/css/bootstrap.css">
<style type="text/css">
form{
margin: 10px 30px;
}
div label{
line-height: 34px;
}
</style>
</head>
<body>
<form role="form">
<div class="form-group">
<label for="email">邮箱</label>
<input class="form-control" id="email" type="email" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label for="pwd">密码</label>
<input class="form-control" id="pwd" type="password" placeholder="请输入您的邮箱密码">
</div>
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox">记住密码
</label>
</div>
</div>
<button type="submit" class="btn btn-default">进入邮箱</button>
</form>
</body>
</html>
用户评论