Bootstrap 组件：按钮式下拉菜单组件的使用

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

把任意一个按钮放入.btn-group中，然后加入适当的菜单标签，就可以让按钮作为菜单的触发器了。

注意：

按钮式下拉菜单依赖 下拉菜单插件，因此需要将此插件包含在你所使用的 Bootstrap 版本中。

单按钮下拉菜单

按钮式下拉菜单其实就是普通的下拉菜单，唯一不同的是外部容器“div.dropdown”换成了“div.btn-group”，display从block换成了inline-block。

<div class="btn-group">
     <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	   success <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li role="separator" class="divider"></li>
	    <li><a href="#">Separated link</a></li>
     </ul>
</div>

---

分裂式按钮下拉菜单

分裂式按钮下拉菜单其实就是人为地将按钮和三角割裂开，使得最终多一个分开的按钮而已。

<div class="btn-group">
    <button type="button" class="btn btn-danger">Action</button>
    <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	   <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li role="separator" class="divider"></li>
	    <li><a href="#">Separated link</a></li>
     </ul>
</div>

---

尺寸

按钮式下拉菜单适用所有尺寸按钮，包括btn-xs、btn-lg、btn-sm等，当然普通下拉列表也支持改变按钮尺寸。

<div class="btn-group">
    <button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Action   <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li role="separator" class="divider"></li>
	    <li><a href="#">Separated link</a></li>
     </ul>
<div class="btn-group">
    <button type="button" class="btn btn-default btn-ms dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Action   <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li role="separator" class="divider"></li>
	    <li><a href="#">Separated link</a></li>
     </ul>
</div>
<div class="btn-group">
    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	Action   <span class="caret"></span>
     </button>
     <ul class="dropdown-menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li role="separator" class="divider"></li>
	    <li><a href="#">Separated link</a></li>
     </ul>
</div>

---

向上弹出式菜单

如果三角方向需要朝上显示，需要在“.btn-group”类上追加“dropup”类名，可以看出，向上三角与向下三角的区别：其实就是改变了一个border-bottom的值。

<div class="btn-group dropup">
	<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
	  Action <span class="caret"></span>
	</button>
	<ul class="dropdown-menu">
	    <li><a href="#">Action</a></li>
	    <li><a href="#">Another action</a></li>
	    <li><a href="#">Something else here</a></li>
	    <li role="separator" class="divider"></li>
	    <li><a href="#">Separated link</a></li>
	</ul>
</div>

---

就先分享到这里!! 😄 后续继续更新!!