杭州网站建设
本内容完全由佚站互联成员原创并且免费提供交流学习,如有转载,请注明出处。

我们在之前的文章中学习了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按钮下拉菜单样式吧。


佚站互联 YEAHZAN,杭州网站建设 创新团队。本文版权所有,转载时请注明出处。

对此文章有疑问?可以留言提问,或者通过 在线联系 我们来获得帮助。