Bootstrap 4 基础教程Bootstrap 4 安装Bootstrap 4 基本框架Bootstrap 4 网格系统Bootstrap 4 文字排版Bootstrap 4 文本颜色Bootstrap 4 背景颜色Bootstrap 4 表格Bootstrap4 图像效果Bootstrap 4 超大屏幕 ( Jumbotron )Bootstrap 4 信息提示框Bootstrap 4 按钮Bootstrap 4 按钮组Bootstrap4 徽章 ( Badges )Bootstrap4 进度条Bootstrap 4 分页Bootstrap 4 面包屑导航Bootstrap 4 列表组Bootstrap 4 卡片组件Bootstrap 4 下拉菜单Bootstrap 4 折叠组件Bootstrap 4 手风琴Bootstrap 4 导航组件Bootstrap 4 导航栏Bootstrap 4 选项卡组件Bootstrap 4 胶囊导航组件Bootstrap 4 表单Bootstrap 4 表单控件Bootstrap4 轮播组件Bootstrap 4 模态框Bootstrap 4 提示框Bootstrap 4 弹出框Bootstrap 4 自动更新导航插件Bootstrap 4 小工具
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" >="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" >="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" >="dropdown">
JAVA
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Servlet</a>
<a class="dropdown-item" href="#">JSP</a>
</div>
</div>
</div>