Bootstrap 拼接式按钮菜单
2018-03-08 11:17
281 查看
拼接式按钮菜单
拼接式按钮菜单由两个按钮拼接而成,一个是动作按钮,一个是下拉菜单开关按钮,它们之间被一个分隔线隔开。下拉菜单开关按钮表现为一个三角符号。用户点击主操作按钮,完成按钮相关动作;点击开关按钮,会弹出菜单。只需在按钮组中添加两个按钮,并为开关按钮添加 <spa n class="caret"></span>,就可以创建出拼接式按钮菜单。如:<div class="btn-group">
<button class="btn">Action</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<!-- dropdown menu links -->
</ul>
</div>
效果如图 4‑13所示:
图4-13 Bootstrap拼接式按钮下拉菜单组件拼接式菜单同样支持上拉和下拉,制作上拉的拼接按钮,也是为 .btn-group 容器追加一个 .dropup 类。版权声明:本文出自 歪脖网 的《Bootstrap教程》,欢迎在线阅读,并提出宝贵意见。
相关文章推荐
- bootstrap菜单、按钮及导航学习笔记5-3
- Bootstrap菜单、按钮与导航
- Bootstrap学习-菜单-按钮-导航
- Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
- Bootstrap按钮菜单
- Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js
- Bootstrap菜单,按钮及导航
- Bootstrap-图标菜单和按钮组件
- Bootstrap菜单、导航、按钮
- bootstrap菜单、按钮及导航学习笔记5-15导航(基础样式)
- Bootstrap(四) 菜单、按钮及导航
- Bootstrap入门书籍之(四)菜单、按钮及导航
- Adobe Edge Animate --异步条件加载框架(yepnop):加载bootstrap之按钮、进度条、菜单效果
- Bootstrap 图标菜单和按钮组件(五)
- bootstrap图标菜单按钮组件
- Adobe Edge Animate --异步条件加载框架(yepnop)之三:加载bootstrap之按钮、进度条、菜单效果
- bootstrap(菜单、按钮、导航)
- Bootstrap组件---下拉菜单,多级菜单 ,按钮
- Bootstrap图标菜单按钮组件
- bootstrap图标菜单和按钮组件