7.3 按钮组 7.3.1 基本按钮组

发表于 更新于 分类于 ， ， 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属性,该属性主要为残疾人用户提供信息。