Bootstrap按钮式下拉菜单
2017-10-07 15:08
357 查看
把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。
单按钮下拉菜单
<div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 广东 <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div>
分裂式按钮下拉菜单
相似地,分裂式按钮下拉菜单也需要同样的改变一些标记,但只是多一个分开的按钮。<div class="btn-group"> <button type="button" class="btn btn-success">广东</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div>
尺寸
使用btn-lg,btn-sm,btn-xs等类来修饰;<!-- lager Button --> <div class="btn-group"> <button type="button" class="btn btn-success btn-lg dropdown-toggle" data-toggle="dropdown"> 广东<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div> <!-- small button --> <div class="btn-group"> <button type="button" class="btn btn-success btn-sm dropdown-toggle" data-toggle="dropdown"> 广东<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div> <!-- extra small button --> <div class="btn-group "> <button type="button" class="btn btn-success btn-xs dropdown-toggle" data-toggle="dropdown"> 广东<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div>
向上弹出式菜单
<div class="btn-group dropup"> <button type="button" class="btn btn-success">广东</button> <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="">广州</a></li> <li><a href="">深圳</a></li> <li><a href="">东莞</a></li> </ul> </div>
相关文章推荐
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- 基于bootstrap按钮式下拉菜单组件的搜索建议插件
- bootstrap--组件之按钮式下拉菜单
- Bootstrap CSS——按钮式下拉菜单
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- 带搜索的js下拉菜单(bootstrap按钮式)
- bootstrap——组件(三、按钮式下拉菜单)
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- bootstrap入门【按钮式下拉菜单,输入框组】
- Bootstrap按钮式下拉菜单
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- Bootstrap3.0学习第十轮(下拉菜单、按钮组、按钮式下拉菜单)
- 【14】Bootstrap — 按钮式下拉菜单
- bootstrap组件之按钮式下拉菜单小结
- Bootstrap 组件-按钮式下拉菜单
- Bootstrap 下拉菜单更改为悬停(hover)触发
- Bootstrap按钮下拉菜单
- Bootstrap 中 下拉菜单和滚动监听插件(十一)(持续更新中。。。)
- bootstrap之dropdown下拉菜单
- Bootstrap 下拉菜单(Dropdowns)