现在的位置: 首页 > HTML / CSS > Bootstrap4 教程 > 正文

Bootstrap4 按钮组

2019年01月28日 Bootstrap4 教程 ⁄ 共 1966字 ⁄ 字号 暂无评论 ⁄ 阅读 184 views 次

Bootstrap 4 中允许我们将按钮放在同一行上。

可以在 <div> 元素上添加 .btn-group 类来创建按钮组。

实例

<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>

尝试一下 »

提示: 我们可以使用 .btn-group-lg|sm 类来设置按钮组的大小。

实例

<div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>

尝试一下 »


垂直按钮组

可以使用 .btn-group-vertical 类来创建垂直的按钮组:

实例

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <button type="button" class="btn btn-primary">Sony</button> </div>

尝试一下 »


内嵌按钮组及下拉菜单

我们可以在按钮组内设置下拉菜单:

实例

<div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>

尝试一下 »


拆分按钮下拉菜单

实例

<div class="btn-group"> <button type="button" class="btn btn-primary">Sony</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="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div>

尝试一下 »


垂直按钮组及下拉菜单

实例

<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">Samsung</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> Sony </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Tablet</a> <a class="dropdown-item" href="#">Smartphone</a> </div> </div> </div>

尝试一下 »

给我留言

留言无头像?


×