把任意一个按钮放入 .btn-group 中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。
简单的实现如下
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Action <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul></div>
效果
立即学习“前端免费学习笔记（深入）”；
就是之前说的button然后右边加了个小三角，至于button的颜色，和button的样式属性是一样的，大家可以在光放文档中找到，但让这样的按钮是点击了之后才会显示下拉菜单的，但是当制作网页的时候往往希望鼠标滑过就能显示下拉菜单，具体怎么修改样式，前面也说过，大家可以查找前面的文章或者百度。
相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。
<div class="btn-group"> <button type="button" class="btn btn-danger">Action</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> </button> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul></div>
效果
立即学习“前端免费学习笔记（深入）”；
很明显也就是靠三角左边多了条竖线。
尺寸的样式和button样式一样，btn-lg,btn-small等，看前面button介绍。
实现很简单，只需要给父元素添加 .dropup 类就能使触发的下拉菜单朝上方打开。
下拉式按钮组就到这了。更多内容请大家前往www.bootcss.com 学习
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
142
收藏
