首页 > 编程知识 正文

bootstrap下拉框代码,bootstrap按钮尺寸

时间:2023-05-05 16:09:39 阅读:148982 作者:1545

按钮的下拉菜单,顾名思义就是按钮,单击按钮以显示下拉菜单。 要使用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

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。