Bootstrap 表单
Bootstrap 的默认设置
使用 Bootstrap 时表单控件都会自动带有一些全局的样式:
所有文本 <input>
, <textarea>
, 和 <select>
元素都会带有 .form-control
样式类而使得其宽度为 100%。
Bootstrap 表单布局
Bootstrap 提供了 3 种表单布局:
- 垂直表单 (默认)
- 水平表单
- 内联表单
所有 3 种表单布局的标准规则:
- 在
<div class="form-group">
中包裹标签和表单控件(需要最佳空间) - 对所有文本
<input>
,<textarea>
, 和<select>
元素添加.form-control
样式。
Bootstrap 垂直表单 (默认)
下面的实例创建了一个垂直表单,其中包含两个输入框、一个复选框和一个提交按钮:
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>垂直表单 (默认)</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">邮箱:</label>
<input type="text" class="form-control" id="email" placeholder="输入邮箱地址">
</div>
<div class="form-group">
<label for="pwd">密码:</label>
<input type="text" class="form-control" id="pwd" placeholder="输入密码">
</div>
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
<button type="button" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>
Bootstrap 内联表单
在内联表单中,所有元素都是内联的、左对齐的,标签是并排的。
注意:这只适用于至少 768px 宽度的浏览器!
内联表单的附加规则:
- 将
.form-inline
类添加到 <form> 元素
下面的实例创建了一个包含两个输入框、一个复选框和一个提交按钮的内联表单:
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>内联表单</h2>
<p>使视口的宽度大于 768px,以查看所有的表单元素都是内联的、左对齐的,并且标签是并排的。</p>
<form class="form-inline" action="/action_page.php">
<div class="form-group">
<label for="email2">邮箱:</label>
<input type="text" class="form-control" id="email2" placeholder="输入邮箱地址">
</div>
<div class="form-group">
<label for="pwd2">密码:</label>
<input type="text" class="form-control" id="pwd2" placeholder="输入密码">
</div>
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
<button type="button" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>
提示:如果你没有为每一个输入都添加标签,这样的表单对于屏幕阅读器就会出现问题。通过使用 .sr-only
类,隐藏除屏幕阅读器之外的所有设备的标签:
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>使用 .sr-only 的内联表单</h2>
<p>使视口的宽度大于 768px,以查看所有的表单元素都是内联的、左对齐的,并且标签是并排的。</p>
<form class="form-inline" action="/example/html/action_page.ashx">
<div class="form-group">
<label class="sr-only" for="email">邮箱:</label>
<input type="email" class="form-control" id="email" placeholder="输入邮箱地址" name="email">
</div>
<div class="form-group">
<label class="sr-only" for="pwd">密码:</label>
<input type="password" class="form-control" id="pwd" placeholder="输入密码" name="pwd">
</div>
<div class="checkbox">
<label><input type="checkbox" name="remember"> 记住我</label>
</div>
<button type="submit" class="btn btn-default">提交</button>
</form>
</div>
</body>
</html>
Bootstrap 水平表单
水平形式意味着标签与大屏幕和中屏幕上的输入字段(水平)对齐。在小屏幕(767px 及以下)上,它将转换为垂直形式(标签标签放置在每个输入框之上)。
水平表单的规则:
- 对 <form> 元素添加
.form-horizontal
样式 - 对 <label> 元素添加
.control-label
样式
提示:使用 Bootstrap 的预定义网格类在水平布局中对齐标签和表单控件组。
下面的实例创建了一个带有两个输入框、一个复选框和一个提交按钮的水平表单。
实例
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal form</h2>
<form class="form-horizontal" action="/example/html/action_page.ashx">
<div class="form-group">
<label class="control-label col-sm-2" for="email3">邮箱:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="email3" placeholder="输入邮箱地址">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd3">密码:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="pwd3" placeholder="输入密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> 记住我</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</body>
</html>