我们在之前的文章中学习了Bootstrap按钮样式的使用以及Bootstrap下拉菜单的使用，如果你想要将按钮样式和下拉菜单结合起来，是不是需要自己去写呢？
其实Bootstrap已经自带了Bootstrap按钮下拉菜单样式，你直接按照格式进行引用即可。
Bootstrap按钮下拉菜单结构
Bootstrap按钮下拉菜单的结构是通过btn-group将按钮元素和下拉菜单元素包裹起来，通过一个JavaScript函数进行整合，从而将它们两者联系起来。
让我们看看应该如何编写单个按钮的下拉菜单结构：<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 下拉按钮 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">杭州网站建设</a></li> <li><a href="#">杭州网站设计</a></li> <li><a href="#">杭州网站制作</a></li> </ul></div>通过以上代码，你只需要点击该按钮，就能够显示对应的下拉菜单了。
Bootstrap按钮下拉菜单分离模式
如果你需要在项目中将按钮与下拉菜单功能分离，也就是说点击按钮可以有其他交互效果，在按钮旁边独立一个下拉菜单组件，那么你就可以使用Bootstrap按钮下拉菜单分离模式，通过一个分隔符将两者分离，起到非常好的按钮交互分离效果：<div class="btn-group"> <button type="button" class="btn btn-danger">下拉分离</button> <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> <span class="sr-only">下拉菜单</span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">杭州网站建设</a></li> <li><a href="#">杭州网站设计</a></li> <li><a href="#">杭州网站制作</a></li> </ul></div>
Bootstrap按钮下拉菜单尺寸
当然按钮都有尺寸需求，下拉按钮菜单同样也有，而对于尺寸的使用跟以往的元素尺寸调用方式一直，直接引入对应样式即可：<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown"> 大按钮 <span class="caret"></span></button><button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown"> 小按钮 <span class="caret"></span></button><button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown"> 最小按钮 <span class="caret"></span></button>
写在文章最后
将按钮与下拉菜单结合起来，对于移动端的交互和用户体验来说可能更为有利，所以如果你需要在移动端兼容自己的Web应用，那么不妨试试Bootstrap按钮下拉菜单样式吧。
发表回复