脚本宝典收集整理的这篇文章主要介绍了三分钟带你了解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下拉菜单的详细内容,更多请关注脚本宝典其它相关文章!
以上是脚本宝典为你收集整理的三分钟带你了解bootstrap下拉菜单全部内容,希望文章能够帮你解决三分钟带你了解bootstrap下拉菜单所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。