蓝蓝站点

Java读书笔记

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

7.4.4 按钮式下拉菜单作为附加元素

在输入框组中添加按钮式下拉菜单作为附加元素非常简单,只要对按钮式下拉菜单的容器应用.input-group-btn样式,并将按钮式下拉菜单整个放入输入框组的容器中即可。
提示:Bootstrap完全支持将分裂式按钮下拉菜单作为输入框组的附加元素。

程序示例

如下代码示范了如何将按钮式下拉菜单作为附加元素。

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
<!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">
        .container>div {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input-group">
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="a">
            <!-- .input-group-btn样式应用于输入框组的附件按钮 -->
            <div class="input-group-btn">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    按钮式下拉菜单（带分隔条）
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdown1">
                    <li><a href="#">新建</a></li>
                    <li><a href="#">打开</a></li>
                    <li><a href="#">保存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </div>
        </div>
        <div class="input-group">
            <!-- .input-group-btn样式应用于输入框组的附件按钮 -->
            <div class="input-group-btn">
                <!-- 普通按钮,起显示作用 -->
                <button class="btn btn-warning" type="button">分裂式按钮下拉菜单（带分隔条）</button>
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <span class="caret"></span>
                    <span class="sr-only">开关下拉菜单</span>
                </button>
                <!-- 菜单 -->
                <ul class="dropdown-menu" aria-labelledby="dropdown2">
                    <li><a href="#">新建</a></li>
                    <li><a href="#">打开</a></li>
                    <li><a href="#">保存</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </div>
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="b">
        </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>

在该代码中定义了两个输入框组,在输入框组中放置了按钮式下拉菜单,但正如1号代码,2号代码所示,此时的按钮式下拉菜单的容器不再使用.btn-group样式,而是使用.input-group-btn样式,这样即可在输入框组中嵌套按钮式下拉菜单了。

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

7.4.3 单选框或多选框作为附加元素

Bootstrap也允许将单选框或多选框作为输入框组的附加元素。只要将单选框或多选框包裹在被指定了.input-group-addon样式的<span>元素中即可。还有就是,作为输入框组附加元素的单选框和多选框不能被指定class="control-form"样式。

程序示例

例如如下代码。

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">
        .container>div {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="input-group">
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="name" placeholder="姓名">
            <!-- .input-group-addon样式应用于输入框组的附件 -->
            <span class="input-group-addon">
                <label for="checkboxBtn1">多选按钮1</label>
                <input type="checkbox" id="checkboxBtn1" aria-label="多选按钮1">
                <label for="checkboxBtn2">多选按钮2</label>
                <input type="checkbox" id="checkboxBtn2" aria-label="多选按钮2">
            </span>
        </div>
        <div class="input-group">
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="price" placeholder="乱填吧">
            <!-- .input-group-addon样式应用于输入框组的附件 -->
            <span class="input-group-addon">
                <label for="radioBtn1">单选按钮1</label>
                <input type="radio" name="radioName" id="radioBtn1" aria-label="单选按钮1">
                <label for="radioBtn2">单选按钮2</label>
                <input type="radio" name="radioName" id="radioBtn2" aria-label="单选按钮2">
            </span>
        </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 分钟

7.4.2 控制输入框组的大小

Bootstrap为控制输入框组的大小提供了如下样式。

样式 描述
.input-group-lg 大的输入框组
.input-group-sm 小的输入框组
直接将上面样式应用于输入框组的容器元素(指定了.input-group样式的<div>元素)上,则整个输入框组内所有元素的大小都会随之改变。

程序示例

下面代码示范了如何控制输入框组的大小。

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
<!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">
        .container>div {
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- 大的输入框组 -->
        <div class="input-group input-group-lg">
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="price-lg" placeholder="填写您获得的验证码">
            <!-- .input-group-btn样式应用于输入框组的附加按钮 -->
            <span class="input-group-btn">
                <button class="btn btn-info" type="button">发送验证码</button>
            </span>
        </div>
        <!-- 普通的输入框组 -->
        <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 class="input-group input-group-sm">
            <!-- .form-control样式应用于表单控件 -->
            <input type="text" class="form-control" id="price-sm" placeholder="填写您获得的验证码">
            <!-- .input-group-btn样式应用于输入框组的附加按钮 -->
            <span class="input-group-btn">
                <button class="btn btn-info" type="button">发送验证码</button>
            </span>
        </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： 本文字数： 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也支持在普通表单中使用输入框组。

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

7.3.5 两端对齐的按钮组

Bootstrap 为两端对齐的按钮组提供了.btn-group-justified 样式,但如果要构建两端对齐的按钮组,还需要进行一些额外的设置。

按钮类型 描述
对于<a>元素的按钮 只要在按钮组的容器元素上添加.btn-group-justified样式即可。
对于<button>元素的按钮 除了在按钮组的容器元素上添加.btn-group-justified样式之外,还要将每个按钮都包裹在按钮组中,也就是<button>元素要放在指定了.btn-group样式的容器元素中。

按钮由a元素构成时

下面先看使用<a>元素构建按钮的代码。

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
<!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">
        <!-- 定义两端对齐的按钮组 -->
        <!-- 按钮由a元素构成只需要在按钮组容器中加入btn-group-justified样式即可 -->
        <div class="btn-group btn-group-justified" role="group">
            <!-- 普通按钮 -->
            <a type="button" class="btn btn-primary">主页</a>
            <!-- 普通按钮 -->
            <a type="button" class="btn btn-primary">联系我们</a>
            <!-- 嵌套按钮式下拉菜单 -->
            <div class="btn-group">
                <!-- 展开按钮 -->
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    图书管理
                    <span class="caret"></span>
                </button>
                <!-- 菜单 -->
                <ul class="dropdown-menu" aria-labelledby="dropdown1">
                    <li><a href="#">新增图书</a></li>
                    <li><a href="#">修改图书</a></li>
                    <li><a href="#">删除图书</a></li>
                    <!-- 分隔条 -->
                    <li role="separator" class="divider"></li>
                    <li><a href="#">查找图书</a></li>
                </ul>
            </div>
        </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>

对于两端对齐的按钮组,如果其中包含的按钮是使用<a>元素构建的,则只要为按钮组的容器元素指定.btn-group-justified样式即可。

按钮由button元素构建的情况

下面代码是使用<button>元素构建按钮的情形。

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
<!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">
        <!-- 定义两端对齐的按钮组 -->
        <!-- 按钮由button元素构成只需要在按钮组容器中加入btn-group-justified样式即可 -->
        <div class="btn-group btn-group-justified" role="group">
            <!-- 1号代码 开始 -->
            <!-- a.要放在btn-group样式的容器中 -->
            <div class="btn-group">
                <!-- b.要在button元素上添加btn-group-justified样式 -->
                <button type="button" class="btn btn-primary btn-group-justified">主页</button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary btn-group-justified">联系我们</button>
            </div>
            <!-- 1号代码 开始 -->
            <!-- 嵌套按钮式下拉菜单 -->
            <div class="btn-group">
                <!-- 展开按钮 -->
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    图书管理
                    <span class="caret"></span>
                </button>
                <!-- 菜单 -->
                <ul class="dropdown-menu" aria-labelledby="dropdown1">
                    <li><a href="#">新增图书</a></li>
                    <li><a href="#">修改图书</a></li>
                    <li><a href="#">删除图书</a></li>
                    <!-- 分隔条 -->
                    <li role="separator" class="divider"></li>
                    <li><a href="#">查找图书</a></li>
                </ul>
            </div>
        </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>

对于两端对齐的按钮组,如果其中包含的按钮是使用<button>元素构建的,则不仅要为按钮组的容器元素指定.btn-group-justified 样式,还需要使用<div class="btn-group">包裹每个按钮。

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

7.3.4 按钮组嵌套下拉菜单

如果希望在按钮组中嵌套下拉菜单,则只要在按钮组容器中添加按钮式下拉菜单即可—也就是在.btn-group容器中再次放置.btn-group构建的下拉菜单。

程序示例

例如如下代码在按钮组中嵌套.btn-group构建的下拉菜单。

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
<!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">
        <!-- 定义水平排列的按钮组 -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">主页</button>
            <button type="button" class="btn btn-primary">联系我们</button>
            <!-- 嵌套按钮式下拉菜单 -->
            <div class="btn-group">
                <!-- 展开按钮 -->
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    图书管理
                    <span class="caret"></span>
                </button>
                <!-- 菜单 -->
                <ul class="dropdown-menu" aria-labelledby="dropdown1">
                    <!-- 菜单项 -->
                    <li><a href="#">新增图书</a></li>
                    <li><a href="#">修改图书</a></li>
                    <li><a href="#">删除图书</a></li>
                    <!-- 分隔条 -->
                    <li role="separator" class="divider"></li>
                    <li><a href="#">查找图书</a></li>
                </ul>
            </div>
            <!-- 嵌套分裂式按钮下拉菜单 -->
            <div class="btn-group">
                <!-- 该按钮只起显示作用 -->
                <button class="btn btn-primary" type="button">作者管理</button>
                <!-- 以三角图标作为展开按钮 -->
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false">
                    <span class="caret"></span>
                    <span class="sr-only">打开作者管理</span>
                </button>
                <!-- 菜单 -->
                <ul class="dropdown-menu" aria-labelledby="dropdown2">
                    <!-- 菜单项 -->
                    <li><a href="#">添加作者</a></li>
                    <li><a href="#">修改作者</a></li>
                    <!-- 分隔条 -->
                    <li role="separator" class="divider"></li>
                    <li><a href="#">查找作者</a></li>
                </ul>
            </div>
        </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>

垂直排列的按钮组嵌套按钮式下拉菜单

Bootstrap 支持垂直排列的按钮组,因此垂直排列的按钮组中也可嵌套按钮式下拉菜单,只要将按钮组的样式改为.btn-group-vertical即可。
注意:**在垂直排列的按钮组中嵌套按钮式下拉菜单时,不支持嵌套分裂式按钮下拉菜单**。

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">
        <!-- 定义垂直排列的按钮组 -->
        <div class="btn-group-vertical" role="group">
            <button type="button" class="btn btn-primary">主页</button>
            <button type="button" class="btn btn-primary">联系我们</button>
            <!-- 嵌套按钮式下拉菜单 -->
            <div class="btn-group">
                <!-- 使用按钮激发菜单 -->
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    图书管理
                    <span class="caret"></span>
                </button>
                <!-- 菜单 -->
                <ul class="dropdown-menu" aria-labelledby="dropdown1">
                    <li><a href="#">新增图书</a></li>
                    <li><a href="#">修改图书</a></li>
                    <li><a href="#">删除图书</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">查找图书</a></li>
                </ul>
            </div>
            <!-- 嵌套按钮式下拉菜单 -->
            <div class="btn-group">
                <button class="btn btn-primary dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    作者管理
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdown2">
                    <li><a href="#">添加作者</a></li>
                    <li><a href="#">修改作者</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">查找作者</a></li>
                </ul>
            </div>
        </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： 本文字数： 4k 阅读时长 ≈ 4 分钟

7.3.3 控制按钮组的大小

Bootstrap为控制按钮组大小提供了如下样式。

样式 描述
.btn-group-lg 大按钮组
.btn-group-sm 小按钮组
.btn-group-xs 超小按钮组

下面代码示范了如何控制按钮组大小。

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
<!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">
        <!-- 第一个按钮组 -->
        <div class="btn-group btn-group-lg" role="group">
            <button type="button" class="btn btn-info" aria-label="左对齐">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info" aria-label="居中对齐">
                <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info" aria-label="右对齐">
                <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
            </button>
        </div>
        <!-- 第二个按钮组 -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary" aria-label="字体">
                <span class="glyphicon glyphicon-font" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-primary" aria-label="加粗">
                <span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-primary" aria-label="斜体">
                <span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
            </button>
        </div>
        <!-- 第三个按钮组 -->
        <div class="btn-group btn-group-sm" role="group">
            <button type="button" class="btn btn-info" aria-label="左对齐">
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info" aria-label="居中对齐">
                <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info" aria-label="右对齐">
                <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
            </button>
        </div>
        <!-- 第四个按钮组 -->
        <div class="btn-group btn-group-xs" role="group">
            <button type="button" class="btn btn-primary" aria-label="字体">
                <span class="glyphicon glyphicon-font" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-primary" aria-label="加粗">
                <span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-primary" aria-label="斜体">
                <span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
            </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>

上面代码定义了4个按钮组,它们的大小依次变小,当我们控制按钮组的大小时,该按钮组中所有按钮的大小也会随之改变。

上面的代码中加载图标需要跨源请求,所以请将页面代码放到Web服务上,不然可能无法加载图标.

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

7.3.2 工具栏

工具栏

如果使用<div>元素将多个按钮组包含在一起,并为该<div>元素指定.btn-toolbar 样式,这样就可以形成工具栏了。
如下代码示范了工具栏的制作方法。

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">
</head>

<body>
    <div class="container">
        <!-- 工具栏 -->
        <div class="btn-toolbar" role="toolbar">
            <!-- 第一个工具组 -->
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-info" aria-label="左对齐">
                    <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-info" aria-label="居中对齐">
                    <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-info" aria-label="右对齐">
                    <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
                </button>
            </div>
            <!-- 第二个工具组 -->
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-primary" aria-label="字体">
                    <span class="glyphicon glyphicon-font" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-primary" aria-label="加粗">
                    <span class="glyphicon glyphicon-bold" aria-hidden="true"></span>
                </button>
                <button type="button" class="btn btn-primary" aria-label="斜体">
                    <span class="glyphicon glyphicon-italic" aria-hidden="true"></span>
                </button>
            </div>
        </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>

在该代码中,使用一个被指定了class="btn-toolbar"样式的<div>元素包含两个按钮组,这样就形成了工具栏。
在上面两个示例中,我们为按钮组的<div>元素指定了role="group",为工具栏的<div>元素指定了role="toolbar",这是为了向使用屏幕阅读器的用户传达正确的按钮分组信息。一般来说,对于按钮组合,应该指定role="group";对于toolbar(工具栏),应该指定role="toolbar"。

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

7.3 按钮组

Bootstrap 提供了一些样式,用于将多个按钮组合在一起形成按钮组,按钮组有自己独特的外观和行为。

7.3.1 基本按钮组

只要将多个按钮放在<div>元素内,并为该<div>元素指定如下样式之一,这些按钮就会形成按钮组。

样式 描述
.btn-group 形成水平排列的按钮组。
.btn-group-vertical 形成垂直排列的按钮组。
如果需要为按钮组容器(指定了.btn-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
<!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">
        <!-- 定义水平排列的按钮组 -->
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-primary">左</button>
            <button type="button" class="btn btn-primary">中</button>
            <button type="button" class="btn btn-primary">右</button>
        </div>
        <!-- 定义垂直排列的按钮组 -->
        <div class="btn-group-vertical" role="group">
            <button type="button" class="btn btn-info" aria-label="左对齐">
                <!-- 加载图标需要跨源请求,请把该代码放到Web服务器(如Tomcat)上 -->
                <!-- 左对齐图标 -->
                <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info" aria-label="居中对齐">
                <!-- 居中对齐图标 -->
                <span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
            </button>
            <button type="button" class="btn btn-info" aria-label="右对齐">
                <span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
            </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>

在该页面代码中定义了两个<div>元素作为按钮组的容器,其中第一个容器被指定了.btn-group 样式,因此该容器中按钮会水平排列;
第二个容器被指定了.btn-group-vertical 样式,因此该容器中的按钮会垂直排列。其中第二组按钮内容不是简单的文本内容,而是小图标,因此程序还为这些按钮指定了aria-label属性,该属性主要为残疾人用户提供信息。

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

7.2.5 按钮式下拉菜单的大小

对于按钮式下拉菜单,同样可通过控制按钮大小的如下样式来控制其大小。

样式 描述
.btn-lg 大按钮
.btn-sm 小按钮
.btn-xs 超小按钮

程序示例

如下代码示范了使用样式来控制按钮式下拉菜单的大小。

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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!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">
        <!-- 按钮式下拉菜单 -->
        <div class="btn-group">
            <!-- 使用按钮来展开菜单,该按钮是大按钮 -->
            <button class="btn btn-warning dropdown-toggle btn-lg" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true">
                按钮式下拉菜单
                <span class="caret"></span>
            </button>
            <!-- 菜单 -->
            <ul class="dropdown-menu" aria-labelledby="dropdown1">
                <!-- 菜单项 -->
                <li>
                    <a href="#">新建</a>
                </li>
                <li>
                    <a href="#">打开</a>
                </li>
                <li>
                    <a href="#">保存</a>
                </li>
                <!-- 分隔条 -->
                <li role="separator" class="divider"></li>
                <li>
                    <a href="#">退出</a>
                </li>
            </ul>
        </div>
        <!-- 按钮式下拉菜单 -->
        <div class="btn-group">
            <!-- 通过按钮来展开菜单 -->
            <button class="btn btn-warning dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true">
                按钮式下拉菜单
                <span class="caret"></span>
            </button>
            <!-- 菜单 -->
            <ul class="dropdown-menu" aria-labelledby="dropdown2">
                <!-- 菜单项 -->
                <li>
                    <a href="#">新建</a>
                </li>
                <li>
                    <a href="#">打开</a>
                </li>
                <li>
                    <a href="#">保存</a>
                </li>
                <!-- 分隔条 -->
                <li role="separator" class="divider"></li>
                <li>
                    <a href="#">退出</a>
                </li>
            </ul>
        </div>
        <!-- 按钮式下来菜单 -->
        <div class="btn-group">
            <!-- 通过按钮来展开菜单,该按钮是小按钮 -->
            <button class="btn btn-warning dropdown-toggle btn-sm" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true">
                按钮式下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdown3">
                <li>
                    <a href="#">新建</a>
                </li>
                <li>
                    <a href="#">打开</a>
                </li>
                <li>
                    <a href="#">保存</a>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                    <a href="#">退出</a>
                </li>
            </ul>
        </div>
        <!-- 按钮式下来菜单 -->
        <div class="btn-group">
            <!-- 通过按钮触发菜单,该按钮式超小按钮 -->
            <button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdown4" data-toggle="dropdown" aria-haspopup="true"
             aria-expanded="true">
                按钮式下拉菜单
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdown4">
                <li>
                    <a href="#">新建</a>
                </li>
                <li>
                    <a href="#">打开</a>
                </li>
                <li>
                    <a href="#">保存</a>
                </li>
                <li role="separator" class="divider"></li>
                <li>
                    <a href="#">退出</a>
                </li>
            </ul>
        </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>