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="左对齐"> <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
属性,该属性主要为残疾人用户提供信息。
原文链接: 7.3 按钮组 7.3.1 基本按钮组