如何利用Bootstrap实现按钮式下拉菜单的效果
导读：在实际案例的操作过程中，我们可能会遇到“如何利用Bootstrap实现按钮式下拉菜单的效果”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起...
在实际案例的操作过程中，我们可能会遇到“如何利用Bootstrap实现按钮式下拉菜单的效果”这样的问题，那么我们该如何处理和解决这样的情况呢？这篇小编就给大家总结了一些方法，具有一定的借鉴价值，希望对大家有所帮助，接下来就让小编带领大家一起了解看看吧。
本篇文章给大家介绍一下Bootstrap 按钮式下拉菜单。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
在按钮中加上.btn-group就可以作为按钮触发菜单了。
单按钮下拉菜单
在按钮中做一些改变，就可以作为下拉菜单。
div class="btn-group">
button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
示例span class="caret">
/span>
/button>
ul class="dropdown-menu">
li>
a href="#">
列表1/a>
/li>
li>
a href="#">
列表2/a>
/li>
li role="separator" class="divider">
/li>
li>
a href="#">
列表3/a>
/li>
/ul>
/div>
分裂式列表下拉菜单
与单按钮下拉菜单极为相似，不同的是分裂式的多一个按钮。
div class="btn-group">
button type="button" class="btn btn-danger">
示例/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">
示例/span>
//为了残障人士设计，不影响正常的阅读，屏幕阅读器能识别并阅读出来
/button>
ul class="dropdown-menu">
li>
a href="#">
列表1/a>
/li>
li>
a href="#">
列表2/a>
/li>
li role="separator" class="divider">
/li>
li>
a href="#">
列表3/a>
/li>
/ul>
/div>
尺寸
下拉菜单都支持尺寸操作，且支持不同尺寸大小。
div class="btn-group">
button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
大尺寸菜单span class="caret">
/span>
/button>
ul class="dropdown-menu">
li>
a href="#">
列表1/a>
/li>
li>
a href="#">
列表2/a>
/li>
li role="separator" class="divider">
/li>
li>
a href="#">
列表3/a>
/li>
/ul>
/div>
div class="btn-group">
button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
中等尺寸菜单span class="caret">
/span>
/button>
ul class="dropdown-menu">
li>
a href="#">
列表1/a>
/li>
li>
a href="#">
列表2/a>
/li>
li role="separator" class="divider">
/li>
li>
a href="#">
列表3/a>
/li>
/ul>
/div>
div class="btn-group">
button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
小尺寸菜单span class="caret">
/span>
/button>
ul class="dropdown-menu">
li>
a href="#">
列表1/a>
/li>
li>
a href="#">
列表2/a>
/li>
li role="separator" class="divider">
/li>
li>
a href="#">
列表3/a>
/li>
/ul>
/div>
关于“如何利用Bootstrap实现按钮式下拉菜单的效果”的内容就介绍到这，感谢各位的阅读，相信大家对如何利用Bootstrap实现按钮式下拉菜单的效果已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何利用Bootstrap实现按钮式下拉菜单的效果
本文地址： https://pptw.com/jishu/654876.html