按钮组 - 前端学习教程_ 前端_前端开发

在前面讲解的内容中，学习了单个按钮的实现方式，但是不能实现多个按钮页面结构，为了实现多个按钮页面结构，Bootstrap提供了按钮组的功能，按钮组就是将多个按钮放在一个类名为.btn-group的父元素中，下面通过例6-1演示按钮组的实现方式。

【例6-1】

创建C:\Bootstrap\chapter06\demo07.html文件，具体代码如下。

1  <!DOCTYPE html>
2  <html>
3  <head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <title>Document</title>
7   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
8  </head>
9  <body>
10  <div class="btn-group" role="group">
11   <button type="button" class="btn btn-primary">按钮1</button>
12   <button type="button" class="btn btn-secondary">按钮2</button>
13   <button type="button" class="btn btn-success">按钮3</button>
14  </div>
15 </body>
16 </html>

上述代码中，第7行代码引入bootstrap.min.css文件；第10行代码定义类名为.btn-group的div元素，表示按钮组，设置role的值为group表示角色属性；第11~13行代码定义类名分别为.btn-primary、.btn-secondary和.btn-success的按钮。

在浏览器中打开demo07.html文件，运行结果如图1所示。

图1 按钮组