7.3.5 两端对齐的按钮组

发表于 更新于 分类于 ， ， 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">包裹每个按钮。