如何正确的使用bootstrap下拉菜单？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。
单按钮下拉菜单
在按钮中做一些改变，就可以作为下拉菜单。
<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>
看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网行业资讯频道，感谢您对编程网的支持。
