0%

7.3.5 两端对齐的按钮组

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">包裹每个按钮。

原文链接: 7.3.5 两端对齐的按钮组