本文详细介绍了如何使用Bootstrap创建按钮下拉菜单，它结合了按钮样式和下拉菜单功能。通过将`<a>`标签替换为`<button>`标签，并将外部容器从`div.dropdown`更改为`div.btn-group`，可以实现点击按钮显示下拉菜单的效果。代码示例展示了相关的CSS样式，用于控制按钮下拉菜单在不同状态下的视觉表现。
按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的。不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果。简单点说就是点击一个按钮，会显示隐藏的下拉菜单。
按钮下拉菜单其实就是普通的下拉菜单，只不过把“”标签元素换成了“”标签元素。唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”。如下所示：
按钮下拉菜单
实现样式代码如下：
/*查看bootstrap.css文件第3204行～第3223行*/
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-right: 8px;
padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
padding-right: 12px;
padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
-webkit-box-shadow: none;
box-shadow: none;
}
运行的效果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
