Bootstrap 4 按钮组
Bootstrap 4 提供了 .btn-group CSS 类用于将一组按钮显示在一行形成按钮组
<div class="btn-group"> <button type="button" class="btn btn-primary">Python</button> <button type="button" class="btn btn-primary">PHP</button> <button type="button" class="btn btn-primary">Perl</button> </div>
按钮组大小
.btn-group-lg|sm|xs CSS 类用于设置按钮组的大小
<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Python</button> <button type="button" class="btn btn-primary">PHP</button> <button type="button" class="btn btn-primary">Perl</button> </div>
垂直按钮组
.btn-group-vertical CSS 类可以创建一个垂直的按钮组
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Python</button> <button type="button" class="btn btn-primary">PHP</button> <button type="button" class="btn btn-primary">Perl</button> </div>
内嵌按钮组及下拉菜单
可以在一个按钮组内在添加另一个按钮组下拉菜单
<div class="btn-group"> <button type="button" class="btn btn-primary">Python</button> <button type="button" class="btn btn-primary">PHP</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> JAVA </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Servlet 3</a> <a class="dropdown-item" href="#">JSP</a> </div> </div> </div>
拆分按钮下拉菜单
.dropdown-toggle-split CSS 类可以将一个按钮组呈现为拆分按钮下拉菜单
<div class="btn-group"> <button type="button" class="btn btn-primary">Python</button> <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="#">Servlet</a> <a class="dropdown-item" href="#">JSP</a> </div> </div>
垂直按钮组及下拉菜单
可以使用 .btn-group-vertical 创建一个垂直的按钮组下拉菜单
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Python</button> <button type="button" class="btn btn-primary">PHP</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> JAVA </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Servlet</a> <a class="dropdown-item" href="#">JSP</a> </div> </div> </div>