欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

Bootstrap按钮下拉菜单组件详解_javascript技巧

程序员文章站 2022-03-09 17:41:26
...
按钮组也是一个独立的组件，按钮组和下拉菜单组件一样，需要依赖于button.js插件才能正常运作。

把一组

组合进一个
做成更复杂的组件。

Bootstrap按钮下拉菜单组件详解_javascript技巧

按钮下拉菜单仅从外观上看和下拉菜单效果基本上是一样的。它们唯一的不同是外部容器div.dropdown换成了div.btn-group

bootstrap.css文件

.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
 outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
 padding-right: 8px;
 padding-left: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
 padding-right: 12px;
 padding-left: 12px;
}
.btn-group.open .dropdown-toggle {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn-group.open .dropdown-toggle.btn-link {
 -webkit-box-shadow: none;
  box-shadow: none;
}

按钮的向下向上三角形

按钮的向下三角形，是通过在button标签中添加span标签元素，且类名为.caret

这个三角形式通过css来实现的，下面是bootstrap.css源码：

.caret {
 display: inline-block;
 width: 0;
 height: 0;
 margin-left: 2px;
 vertical-align: middle;
 border-top: 4px solid;
 border-right: 4px solid transparent;
 border-left: 4px solid transparent;
}

以上就是本文的全部内容，希望对大家的学习有所帮助。

Bootstrap按钮下拉菜单组件详解_javascript技巧

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

相关文章

相关视频

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论
  • Bootstrap按钮下拉菜单组件详解_javascript技巧

    • 专题推荐

    相关标签： Bootstrap 按钮 下拉 菜单

    上一篇： 小程序提示跳转失败是什么原因

    下一篇： 关于promise对象的简单用法

    推荐阅读