0%

7.4 输入框组 7.4.1 基本输入框组

发表于 更新于 分类于 ， ，

7.4 输入框组

Bootstrap允许将输入框和其他文本、按钮、下拉菜单组合起来,从而形成输入框组。需要说明的是,通常来说,输入框组只支持对<input>元素的扩展,对<select>的支持在WebKit浏览器中有问题;对<textarea>元素的rows属性的支持也有问题。

7.4.1 基本输入框组

输入框组主要用到如下三个样式。

样式 描述
.input-group 该样式应用在输入框组的容器元素(通常是<div>元素)上。
.input-group-addon 该样式应用在输入框组中附加的普通元素上。
.input-group-btn 该样式应用在输入框组中附加的按钮或按钮式下拉菜单上。
被指定.input-group样式的元素用于包含输入框控件和附加的元素,其中
- 输入框控件要指定.form-control样式,
- 附加的元素要指定.input-group-addon或.input-group-btn样式。

Bootstrap支持在输入框的任意一侧添加附加元素或按钮,也可以在输入框的两侧同时添加附加元素或按钮;但Bootstrap不支持在输入框的单独一侧同时添加多个附加元素,也不支持在单个输入框组中添加多个输入框控件。
如果需要为输入框(指定了.input-group样式的HTML元素)应用工具提示或弹出框,则必须指定container:'body'选项,这样可以避免不必要的副作用(例如工具提示或弹出框被触发时,会让页面元素变宽或失去圆角)。

程序示例

下面代码示范了如何构建简单的输入框组。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title> 输入框组 </title>
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>

<body>
	<div class="container">
		<!-- 水平表单 -->
		<form action="http://www.fkit.org" class="form-horizontal">
			<!-- .form-group样式表现出.row行为 -->
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">邮件地址</label>
				<div class="col-sm-10">
					<!-- `.input-group`样式应用在输入框组的容器元素上-->
					<!-- 1号代码 -->
					<div class="input-group">
						<!-- .form-control样式应用于表单控件 -->
						<input type="text" class="form-control" id="mail" placeholder="收件人">
						<!-- .input-group-addon样式应用在输入框组中附加的普通元素上。 -->
						<!-- 2号代码 -->
						<span class="input-group-addon">@crazyit.org</span>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">会员名</label>
				<div class="col-sm-10">
					<!-- 定义输入框组 -->
					<div class="input-group">
						<!-- .input-group-addon样式应用在输入框组中附加的普通元素上。 -->
						<span class="input-group-addon">疯狂</span>
						<!-- .form-control样式应用于表单控件 -->
						<input type="text" class="form-control" id="name" placeholder="您的名字">
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">价格</label>
				<div class="col-sm-10">
					<!-- `.input-group`样式应用在 输入框组 的容器元素上-->
					<div class="input-group">
						<!-- .input-group-addon样式应用在输入框组中附加的普通元素上。 -->
						<span class="input-group-addon">￥</span>
						<!-- .form-control样式应用于表单控件 -->
						<input type="number" class="form-control" id="price" placeholder="填写年费价格" min="50">
						<span class="input-group-addon">.00（元）</span>
					</div>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">验证码</label>
				<div class="col-sm-10">
					<!-- `.input-group`样式应用在 输入框组 的容器元素上-->
					<div class="input-group">
						<!-- .form-control样式应用于表单控件 -->
						<input type="text" class="form-control" id="price" placeholder="填写您获得的验证码">
						<!-- `.input-group-btn`样式应用在`输入框组中`附加的按钮或按钮式下拉菜单上。-->
						<span class="input-group-btn">
							<button class="btn btn-info" type="button">发送验证码</button>
						</span>
					</div>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="../jquery-3.1.1.js"></script>
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

在该代码中的1号代码定义了<div>元素,并为该元素指定了.input-group属性,因此该元素将可作为输入框组的容器元素;接下来的代码在输入框组容器内放置了一个输入框;2号代码定义了一个<span>元素,并为该元素指定了.input-group-addon属性,因此该元素将可作为输入框组的附加元素—这就是典型的输入框组的构建方法。
在此代码中一共构建了4个输入框组,其中

  • 第一个输入框组的附加元素位于输入框的后面,
  • 第二个输入框组的附加元素位于输入框的前面,
  • 第三个输入框组添加了2个附加元素,分别位于输入框的前面和后面。
  • 第四个输入框组的附加元素是按钮,因此需要为附加按钮所在的父元素(<span>元素)指定.input-group-btn样式。

提示:虽然本例使用了水平表单来演示输入框组,但实际上Bootstrap也支持在普通表单中使用输入框组。

原文链接: 7.4 输入框组 7.4.1 基本输入框组