在按钮中加上.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下拉菜单的详细内容,更多请关注php中文网其它相关文章!
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
- 上一篇:聊聊Bootstrap中的导航条
- 下一篇:一招搞定bootstrap警告框
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论