广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章给大家介绍一下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下拉菜单的详细内容，更多请关注9543建站博客其它相关文章！