<div> <button type="button" data-toggle="dropdown"> Action <span></span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul> </div>
分裂式按钮下拉菜单
相似地，分裂式按钮下拉菜单也需要同样的改变标记，但只要多一个分开的按钮。
<div> <button type="button">Action</button> <div> <button type="button" data-toggle="dropdown"> <span></span> <span>Toggle Dropdown</span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul> </div> </div
只能点击小图标才能出现下来菜单额。
2）、尺寸
下拉菜单按钮适用所有尺寸的按钮。
<div> <button type="button" data-toggle="dropdown"> Large button <span></span> </button> <ul> ... </ul> </div> <!-- Small button group --> <div> <button type="button" data-toggle="dropdown"> Small button <span></span> </button> <ul> ... </ul> </div> <!-- Extra small button group --> <div> <button type="button" data-toggle="dropdown"> Extra small button <span></span> </button> <ul> ... </ul> </div>
通过样式类.btn-lg、 .btn-sm、.btn-xs来控制按钮的大小。
3）、向上弹出式菜单
给父元素添加.dropup就能使触发的下拉菜单在元素上方。
<div> <button type="button">Dropup</button> <button type="button" data-toggle="dropdown"> <span></span> <span>Toggle Dropdown</span> </button> <ul> <!-- Dropdown menu links --> </ul> </div>
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：