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

发表于 更新于 分类于 ， ， Waline： 本文字数： 4.5k 阅读时长 ≈ 4 分钟

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也支持在普通表单中使用输入框组。