开心档之 boostrap 按钮组
作者：雪奈椰子
- 2023-02-10 广东
本文字数：1418 字
阅读完需：约 5 分钟
Bootstrap4 按钮组
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>
复制代码
多个按钮组
按钮组可以一个个并列显示在同一行上：
实例
<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> <div class="btn-group"> <button type="button" class="btn btn-primary">BMW</button> <button type="button" class="btn btn-primary">Mercedes</button> <button type="button" class="btn btn-primary">Volvo</button></div>复制代码
划线
评论
复制
发布于: 刚刚阅读数: 5
雪奈椰子
关注
还未添加个人签名 2022-07-22 加入
还未添加个人简介
评论