Bootstrap 按钮组 定义和使用 Bootstrap 允许您将一系列按钮组合在一起(在一行中)在一个按钮组中。 将 .divn-group 类的 <div> 元素用于创建按钮组: <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">三星</button> <button type="button" class="btn btn-primary">索尼</button> </div> </div> 复制尝试一下 提示:不要将按钮大小应用于组中的每个按钮,而应将类 .btn-group-lg 用于大型按钮组,将 .btn-group-sm 用于小型按钮组: <div class="container"> <h2>按钮组大小</h2> <p>添加.btn-group- *类以调整按钮组中所有按钮的大小。</p> <h3>大按钮:</h3> <button class ="btn-group btn-group-lg"> <button type ="button" class ="btn btn-primary"> Apple </button> <button type ="button" class ="btn btn-primary">三星</button> <button type ="button" class ="btn btn-primary">索尼</button> </div> <h3>默认按钮:</h3> <button class ="btn-group"> <button type ="button" class ="btn btn-primary"> Apple </button> <button type ="button" class ="btn btn-primary">三星</button> <button type ="button" class ="btn btn-primary">索尼</button> </div> <h3>小按钮:</h3> <button class ="btn-group btn-group-sm"> <button type ="button" class ="btn btn-primary"> Apple </button> <button type ="button" class ="btn btn-primary">三星</button> <button type ="button" class ="btn btn-primary">索尼</button> </div> </div> 复制尝试一下 输出结果如下: 大型按钮组: Apple 三星 索尼 默认的按钮组: Apple 三星 索尼 小型按钮组: Apple 三星 索尼 垂直按钮组 使用类 .btn-group-vertical 创建一个垂直按钮组: <div class="container"> <div class="btn-group-vertical"> <button type ="button" class ="btn btn-primary"> Apple </button> <button type ="button" class ="btn btn-primary">三星</button> <button type ="button" class ="btn btn-primary">索尼</button> </div> </div> 复制尝试一下 输出结果如下: Apple 三星 索尼 嵌套按钮组和下拉菜单 嵌套按钮组可以创建下拉菜单: <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">三星</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 索尼 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">索尼1</a> <a class="dropdown-item" href="#">索尼2</a> </div> </div> </div> </div> 复制尝试一下 输出结果如下: Apple 三星 索尼 索尼1 索尼2 提示:如想换成垂直的嵌套按钮组,可以上面示例的父元素类 .btn-group 换成 .btn-group-vertical 拆分按钮下拉菜单 下面示例演示了拆分按钮下拉菜单: <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">索尼</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> <span class="caret"></span> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">索尼1</a> <a class="dropdown-item" href="#">索尼2</a> </div> </div> </div> </div> 复制尝试一下 输出结果如下: 索尼 索尼1 索尼2 并排按钮组 默认情况下,按钮组是“内联”的,当您有多个组时,它们可以并排显示: <div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">三星</button> <button type="button" class="btn btn-primary">索尼</button> </div> <div class="btn-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> 复制尝试一下 输出结果如下: Apple 三星 索尼 宝马 奔驰 欧迪 想了解更多的按钮知识,请参考 bootstrap 按钮手册