按钮的下拉菜单,顾名思义就是按钮,单击按钮以显示下拉菜单。 要使用bootstrap创建按钮下拉菜单,只需将按钮和下拉菜单放在一个. btn-grounp上。
典型的按钮下拉菜单如下所示。
实现代码如下。
! doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' title按钮下拉菜单/titlelinkrel=' style sheet ' href=' ./libs/jquery-3.1.1.js '/script src=' ./libs/bootstrap-3.3.7/7 headbodydivclass=' container ' style=' margin-top :20 px ' divclass=' BTN-group ' button class=' BTN BTN-primarimare buttonulclass=' drop down-menu ' lia href=' # '菜单选项1/a/li lia href='# '菜单选项2/a/Li Li lia href=' # '
正如您在代码中看到的那样,这里使用了div class='btn-group '包装按钮和下拉菜单。 你可能在很多网站上经常看到这样的下拉菜单:
如图所示,单击左键不显示菜单,单击右键显示菜单。
要实现这样的效果,请在右侧添加按钮。
button class='btn btn-primary '服务/buttonbuttonclass=' BTN BTN-primary drop down-toggle ' data-toggle=' drop down
和普通按钮一样,按钮下拉菜单中的按钮也可以在. btn-lg btn-sm .btn-xs中调整大小。 这里不演示。
下面有下拉菜单,当然上面也应该有下拉菜单。 实现上面提到的下拉菜单很简单。 首先,确认上面有足够的空间可以显示下拉菜单,然后在div class='btn-group '中添加div class='btn-group dropup '这样的dropup即可实现
divclass=' BTN-groupdropup ' button class=' BTN BTN-primary '服务/button button class=' BTN BTN-primary drop down-top span/buttonul a/li lia href='# '菜单选项2/a/li lia href='# '菜单选项3/a/li lia href='# '菜单选项4/a/Li Li
效果如下。
本文参考资料见http://www.run OOB.com/bootstrap/bootstrap-button-drop downs.html