蓝蓝站点

Java读书笔记

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

6.9.9 校验状态

Bootstrap为表单控件的校验状态提供了如下样式。

样式 描述
.has-success 校验成功,显示绿色。
.has-warning 警告,显示黄色。
.has-error 校验错误,显示红色。
将这些样式应用在包含表单控件的容器上,则该容器内所有表单控件、标签、帮助文本都会受到该样式的影响。

例如如下代码:

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
<!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">
            <div class="form-group has-success">
                <label class="control-label" for="succ">成功</label>
                <input type="text" class="form-control" id="succ" aria-describedby="helpBlock">
                <span id="helpBlock" class="help-block">该输入控件校验通过.</span>
            </div>
            <div class="form-group has-warning">
                <label class="control-label" for="warning">警告</label>
                <input type="text" class="form-control" id="warning">
            </div>
            <div class="form-group has-error">
                <label class="control-label" for="error">错误</label>
                <input type="text" class="form-control" id="error">
            </div>
            <div class="has-success">
                <div class="radio">
                    <label>
                        <input type="radio" name="rd" value="option1"> 成功状态的单选框
                    </label>
                </div>
            </div>
            <div class="has-warning">
                <div class="radio">
                    <label>
                        <input type="radio" name="rd" value="option2"> 警告状态的单选框
                    </label>
                </div>
            </div>
            <div class="has-error">
                <div class="radio">
                    <label>
                        <input type="radio" name="rd" value="option3"> 错误状态的单选框
                    </label>
                </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>

在该页面代码中定义了6个<div>元素,每个<div>元素包含一组label、表单控件等,当程序对包含表单控件的<div>元素应用校验状态的样式时,会影响该容器内所有控件。
需要说明的是,上面这些校验状态的样式,仅仅只是通过颜色来表达—这种表达可能和约定俗成有关,这些颜色效果对于某些用户(如使用屏幕阅读器的用户、色盲用户)无效。如果需要向所有用户都提供正确的校验状态,Bootstrap 推荐在<label>标签上以文本形式显示提示信息,或使用Glyphicon 字体图标,或使用额外的帮助文本块。在下一节的示例中我们会看到使用额外信息来显示校验状态。

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

6.9.8 帮助文本

帮助文本用于向用户提供额外的帮助信息,帮助用户理解某个文本框的具体功能。可通过如下CSS样式定义帮助文本。
.help-block:定义块级帮助文本。

此外,应通过aria-describedby 属性将帮助文本和表单控件进行关联,这样当用户将焦点定位到该控件或正在该控件中输入时,辅助技术(如屏幕阅读器)就会自动朗读这段帮助文本的内容。

程序示例

下面是帮助文本的示例。

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
<!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">
            <div class="form-group">
                <label for="name">用户名</label>
                <!-- 使用aria-describedby属性关联帮助文本 -->
                <input type="text" id="name" name="name" class="form-control" aria-describedby="helpBlock">
                <!-- 定义帮助文本 -->
                <span id="helpBlock" class="help-block">请输入你喜欢的用户名字</span>
            </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>

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

6.9.7 表单控件的状态

Bootstrap 对表单控件进行了界面上的改进和美化,不同状态下的表单控件具有不同的外观行为。

1.焦点状态

Bootstrap去掉了某些表单控件默认的焦点行为(有些浏览器默认的焦点行为是应用outline样式),Bootstrap对焦点状态应用了box-shadow属性。

2.禁用状态

为输入框设置disabled属性可将输入框设为禁用状态,禁用状态的输入框呈灰色显示,还会显示not-allowed光标。

默认情况下,如果为<fieldset>元素添加disabled属性,那么该元素所包含的所有表单控件都会进入禁用状态。但IE 11及更早版本的IE浏览器并不完全支持为<fieldset>元素添加disabled属性,因此为了兼容IE浏览器,建议使用JS代码来禁用<fieldset>元素。
另外需要说明的是,将<fieldset>元素设为disabled的可以禁用它包含的所有原生表单控件,但Bootstrap可以将<a>元素转换成按钮(通过设置class="btn btn-*")。这些通过<a>转换成的按钮将只是被添加pointer-events: none;属性,但该属性在Opera 18及IE 11中并没有得到全面支持,并且不能阻止用户通过键盘导航让该按钮获得焦点,激活链接,因此也建议使用JS代码来禁止<a>元素被转换成按钮。

3.只读状态

为输入框设置readonly属性可将输入框设为只读状态,只读状态的输入框呈灰色显示,但依然使用普通光标。

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

6.9.6 静态控件

在某些情况下,需要在原本应该出现输入框的地方使用一段文本内容代替,此时可使用Bootstrap 的静态控件。静态控件一般就是一个<p>元素,且需要为该元素指定.form-control-static样式。

程序示例

例如如下页面示范了静态控件的用法。

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
<!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">
            <!-- .form-group样式的元素作为容器 -->
            <div class="form-group">
                <label for="name">用户名</label>
                <!-- 静态控件 -->
                <p class="form-control-static">小王</p>
            </div>
            <div class="form-group">
                <label for="passwd">密码</label>
                <input type="password" class="form-control" id="passwd" placeholder="密码">
            </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>

在水平表单中同样可通过.form-control-static样式来设置静态控件。

程序示例

例如如下代码:

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
<!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-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <!-- 静态控件 -->
                    <p class="form-control-static">fkjava.org</p>
                </div>
            </div>
            <div class="form-group">
                <label for="passwd" class="col-sm-3 control-label">密码</label>
                <div class="col-sm-9">
                    <input type="password" class="form-control" id="passwd" readonly placeholder="密码">
                </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>

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

6.9.5 表单控件的大小

如果要单独设置表单控件的高度,则可通过如下样式来设置。

样式 描述
.input-lg 设置”大”的控件。
.input-sm 设置”小”的控件。

程序示例 单独设置表单控件的高度

例如如下代码用于控制表单控件的大小。

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
<!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">
    <style type="text/css">
        input,
        select {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <input type="text" class="form-control input-lg" id="a" placeholder=".input-lg">
        <input type="text" class="form-control" id="b" placeholder="默认高度">
        <input type="text" class="form-control input-sm" id="c" placeholder=".input-sm">
        <select type="text" class="form-control input-lg" id="d">
            <option value="a">.input-lg-1</option>
            <option value="a">.input-lg-2</option>
            <option value="a">.input-lg-3</option>
            <option value="a">.input-lg-4</option>
        </select>
        <select type="text" class="form-control" id="e">
            <option value="a">.默认大小1</option>
            <option value="a">.默认大小2</option>
            <option value="a">.默认大小3</option>
            <option value="a">.默认大小4</option>
        </select>
        <select type="text" class="form-control input-sm" id="f">
            <option value="a">.input-sm-1</option>
            <option value="a">.input-sm-2</option>
            <option value="a">.input-sm-3</option>
            <option value="a">.input-sm-4</option>
        </select>
    </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>

设置水平表单整个控件的高度或字体

对于水平表单,如果要设置整个控件组件(包括控件以及该控件对应的<label>元素)的高度和字体,可通过如下样式来设置。

样式 描述
.form-group-lg 设置”大”的控件和label。
.form-group-sm 设置”小”的控件和label。

程序示例

例如如下代码用于控制水平表单中控件的大小。

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
<!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-lg设置label和表单控件的大小 -->
            <!-- 水平表单form-group表示一行 -->
            <div class="form-group form-group-lg">
                <label for="a" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <!-- .form-control样式应用于表单控件 -->
                    <input type="text" class="form-control" id="a" placeholder=".form-group-lg">
                </div>
            </div>
            <div class="form-group">
                <label for="b" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="b" placeholder="正常大小">
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label for="c" class="col-sm-3 control-label">用户名</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="c" placeholder=".form-group-sm">
                </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>

如何设置表单控件的宽度

默认情况下,表单控件的宽度总是100%,因此开发者通常不能直接控制该表单控件的宽度,但实际上可以将表单控件放入网格布局的单元格中,再通过设置单元格所占的列宽来控制表单控件的宽度。

例如如下代码即可用于控制表单控件的宽度。

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
<!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-3">
                    <!-- .form-control样式应用于表单控件 -->
                    <input type="text" class="form-control" id="name" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="passwd" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-6">
                    <!-- .form-control样式应用于表单控件 -->
                    <input type="password" class="form-control" id="passwd" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="passwd" class="col-sm-2 control-label">电子邮件</label>
                <div class="col-sm-4">
                    <!-- .form-control样式应用于表单控件 -->
                    <input type="email" class="form-control" id="email" placeholder="电子邮件">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">提交</button>
                </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>

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

6.9.4 多选框和单选框

多选框和单选框虽然也是通过<input>元素来实现的,但由于它们的外观有些特殊,因此Bootstrap为它们单独提供了对应的样式。

样式 描述
.radio 该样式应用于单选框所在的容器。
.radio-inline 该样式应用于单选框所在的容器或直接应用于单选框的<label>元素。
.checkbox 该样式应用于多选框所在的容器。
.checkbox-inline 该样式应用于多选框所在的容器或直接应用于多选框的<label>元素。
.disabled 该样式需要应用于多选框或单选框的父容器,该样式表示禁用多选框或单选框,将光标移动到对应<label>元素上时也会显示禁用光标。一般<input>元素会配合使用disabled属性。

程序示例 .radio和.checkbox

下面代码示范了.radio和.checkbox两个样式的用法。

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
<!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">
            <!-- .checkbox样式的元素作为容器 -->
            <div class="checkbox">
                <label>
                    <input type="checkbox" value='html5'> 疯狂前端开发讲义
                </label>
            </div>
            <div class="checkbox disabled">
                <label>
                    <input type="checkbox" value='fk' disabled> 被禁用的多选框
                </label>
            </div>
            <!-- .radio样式的元素作为容器 -->
            <div class="radio">
                <label>
                    <input name="color" type="radio" value='red'> 红色
                </label>
            </div>
            <div class="radio">
                <label>
                    <input name="color" type="radio" value='green'> 绿色
                </label>
            </div>
            <div class="radio disabled">
                <label>
                    <input name="color" type="radio" value='blue' disabled> 蓝色（被禁用）
                </label>
            </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>

Bootstrap 的.checkbox、.radio 样式默认将单选框、多选框以堆叠方式放在一起。

程序示例 .checkbox-inline .radio-inline

如果需要将单选框、多选框放在同一个行,则可使用.checkbox-inline、.radio-inline这两个样式,这两个样式既可作用于单选框或多选框的容器,也可作用于单选框或多选框的<label>元素。例如如下代码:

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
<!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">
            <!-- .checkbox-inline样式的元素作为容器 -->
            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" value='html5'> 疯狂前端开发讲义
                </label>
            </div>
            <div class="checkbox-inline">
                <label>
                    <input type="checkbox" value='fk'> 第二个选项
                </label>
            </div>
        </form>
        <form action="http://www.fkit.org">
            <!-- .radio-inline样式直接作用于label元素 -->
            <label class="radio-inline">
                <input name="color" type="radio" value='red'> 红色
            </label>
            <label class="radio-inline">
                <input name="color" type="radio" value='green'> 绿色
            </label>
            <label class="radio-inline">
                <input name="color" type="radio" value='blue'> 蓝色
            </label>
        </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>

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

6.9.3 水平表单

如果希望将<label>元素和表单控件放在同一行,可为<form>元素或表单控件的容器设置class="form-horizontal",再结合前面介绍的网格布局即可实现水平表单。
为表单设置.form-horizontal样式之后,表单内的.form-group将表现成.row样式行为,因此此时不再需要设置.row 样式,直接将.col-xx-N样式应用于<label>元素和表单控件的容器即可。
此外,最好为<label>元素添加.control-label 样式,这样可保证这些label 的大小与表单控件大小一致,具体可参考6.9.5节的内容。

程序示例

例如如下代码示范了如何实现水平表单。

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
<!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-3 control-label">用户名</label>
                <!-- 文本框占9列 -->
                <div class="col-sm-9">
                    <!-- .form-control样式应用于表单控件 -->
                    <input type="text" class="form-control" id="name" placeholder="用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="passwd" class="col-sm-3 control-label">密码</label>
                <div class="col-sm-9">
                    <!-- .form-control样式应用于表单控件 -->
                    <input type="password" class="form-control" id="passwd" placeholder="密码">
                </div>
            </div>
            <div class="form-group">
                <label for="photo" class="col-sm-3 control-label">选择照片上传</label>
                <div class="col-sm-9">
                    <input type="file" id="photo">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <!-- .checkbox样式的元素作为容器 -->
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> 婚否
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-9">
                    <button type="submit" class="btn btn-default">提交</button>
                </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>

将表单样式设为.form-horizontal之后,表单内的.form-group样式代替了网格布局中的.row 样式,因此在该页面中的每行都需要指定一个class="form-group"的<div>元素,这样即可生成网格布局中的行。接下来将<label>元素设为.col-sm-3样式,这表明该标签将会占据3列宽度;将表单控件所在的<div>元素设为.col-sm-9样式,这表明该标签将会占据9列宽度。

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

6.9.2 行内表单

行内表单的意思是,将表单内所有控件都放在单独一行。为<form>元素或表单控件的容器设置.form-inline样式即可实现行内表单。
行内表单会让所有表单控件表现为inline-block级别的控件,其只适用于viewport宽度≥768px的情形,如果viewport再小的话表单还是会以堆叠方式显示(重新变回普通基础表单的显示方式)。
需要说明的是,Bootstrap默认将输入框、单选/多选框控件设置为width:100%;,但对于行内表单,Bootstrap将这些元素的宽度设置为width:auto;,这样才能将多个控件排列在同一行。但在这种方式下,可能需要开发者手动设置表单控件的宽度。
只有当表单内的控件不是太多的情况下才适合使用行内表单,否则行内表单的显示会比较丑陋。

程序示例

下面代码示范了行内表单的用法。

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
<!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">
            <!-- .form-group样式的元素作为容器 -->
            <div class="form-group">
                <label for="name">用户名</label>
                <!-- .form-control样式应用于表单控件 -->
                <input type="text" class="form-control" id="name" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="passwd">密码</label>
                <!-- .form-control样式应用于表单控件 -->
                <input type="password" class="form-control" id="passwd" placeholder="密码">
            </div>
            <div class="form-group">
                <label for="photo">选择照片上传</label>
                <input type="file" id="photo">
            </div>
            <!-- .checkbox样式的元素作为容器 -->
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 婚否
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </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>

在该页面代码中,并未使用<form>元素作为表单控件的容器,而是直接使用<div>元素作为表单控件的容器,并为该<div>元素指定了class="form-inline",这表明该容器将会以行内表单的形式来显示这些控件。
需要说明的是,即使对于行内表单,也应该为每个表单控件配置对应的<label>元素,否则屏幕阅读器将无法正确识别它们,如果为了节省行内表单的空间,可为<label>元素设置.sr-only来隐藏该元素(只有在屏幕阅读器上才会显示出来)。
此外,还可使用aria-label、aria-labelledby或title属性来代替<label>元素,但如果这些属性都不存在,屏幕阅读器可能会读取placeholder 属性(如果指定了该属性),但使用placeholder来代替aria-label、aria-labelledby其实并不妥当。

程序示例 使用.sr-only隐藏label元素

下面代码示范了使用.sr-only在屏幕上将<label>元素隐藏的效果。

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
<!DOCTYPE html>
<html>

<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <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">
        <div class="form-inline">
            <!-- .form-group样式的元素作为容器 -->
            <div class="form-group">
                <label for="name" class="sr-only">用户名</label>
                <!-- .form-control样式应用于表单控件 -->
                <input type="text" class="form-control" id="name" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="passwd" class="sr-only">密码</label>
                <!-- .form-control样式应用于表单控件 -->
                <input type="password" class="form-control" id="passwd" placeholder="密码">
            </div>
            <!-- .checkbox样式的元素作为容器 -->
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 婚否
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </div>
    </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>

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

6.9 表单相关样式

表单是Web开发中最常用的组件,Bootstrap为表单及表单控件提供了大量美观、优雅的样式。

6.9.1 基础表单

Bootstrap为表单提供了如下几个最基本的样式。

方法 描述
.form-group 被指定了该样式的<div>元素将作为容器来盛装<label>元素和表单控件,这样保证它们有最好的排列。
.form-control 大部分表单输入控件都应该被指定该样式。
.checkbox 被指定了该样式的<div>元素将作为容器来盛装<label>元素和复选框控件,这样保证它们有最好的排列。
Bootstrap 支持大部分表单控件、文本输入域控件。对于<input>元素,支持所有HTML 5类型的输入控件:text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel和color。必须设置了正确的type属性,Bootstrap才能为这些表单控件提供正确的显示样式。

关于这些HTML 5 类型的输入控件的相关用法,读者可参考《疯狂HTML 5/CSS 3/JavaScript`讲义》。

程序示例

下面程序示范了上面3个样式的用法:

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
<!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">
            <!-- .form-group样式的元素作为容器 -->
            <div class="form-group">
                <label for="name">用户名</label>
                <!-- .form-control样式应用于表单控件 -->
                <input type="text" class="form-control" id="name" placeholder="用户名">
            </div>
            <div class="form-group">
                <label for="passwd">密码</label>
                <!-- .form-control样式应用于表单控件 -->
                <input type="password" class="form-control" id="passwd" placeholder="密码">
            </div>
            <div class="form-group">
                <label for="photo">选择照片上传</label>
                <input type="file" id="photo">
            </div>
            <!-- .checkbox样式的元素作为容器 -->
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 婚否
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </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>

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

6.8.2 打印相关样式

样式 浏览器 打印
.visible-print-block 不可见 可见
.visible-print-inline 不可见 可见
.visible-print-inline-block 不可见 可见
.hidden-print 不隐藏 隐藏

Bootstrap 早期使用的.visible-print 也依然存在。但是从v3.2.0 版本开始不再建议使用它,建议使用.visible-print-block,二者只在<table>相关元素上略有区别。