一、下拉菜单:
用于显示链接列表的可切换、有上下文的菜单
.dropdown 菜单用于指定下拉菜单,下拉菜单都包裹在 .dropdown 或者 .dropup 里。
.dropdown-menu 类用于实际下拉菜单的创建。
.dropdown-header 类用于在下拉菜单中添加标题
.divider 下拉菜单中的分割线
.disabled 下拉菜单中的禁用项
<div class="dropdown"><button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" aria-labelledby="dropdownMenu1"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>
三角符号:
<span class="caret"></span>
二、按钮组
允许把一组按钮放在同一行里
.btn-group 该 class 用于形成基本的按钮组。在 .btn-group 中放置一系列带有 class .btn 的按钮。
.btn-group-vertical 该 class 让一组按钮垂直堆叠显示,而不是水平堆叠显示。
调整整个按钮组的大小:.btn-group-lg, .btn-group-sm, .btn-group-xs
调整单个按钮的大小:.btn-sm, .btn-lg, .btn-xs
单个按钮宽度100%占满父容器:.btn-block
<div class="btn-group" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-danger">Middle</button><button type="button" class="btn btn-primary">Right</button></div>
<div class="btn-group-vertical btn-group-xs" role="group" aria-label="..."><button type="button" class="btn btn-default">Left</button><button type="button" class="btn btn-danger">Middle</button><button type="button" class="btn btn-primary">Right</button></div>
三、下拉菜单与按钮使用
1)单按钮下拉菜单:见下拉菜单
2)分裂式按钮下拉菜单
<div class="btn-group"><button type="button" class="btn btn-primary">按钮1</button><button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span></button><ul class="dropdown-menu"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>
三、下拉菜单(Dropdown)插件
下拉菜单,没有涉及到交互部分,使用下拉菜单(Dropdown)插件,可以向任何组件(比如导航栏、标签页、胶囊式导航菜单、按钮等)添加下拉菜单。
注意:data-toggle="dropdown" 必须要有
通过 JavaScript 调用下拉菜单切换 :
$('.dropdown-toggle').dropdown()
小需求:在一的基础上添加鼠标放上去与离开时切换显示或隐藏下拉菜单
<div class="dropdown" ><button class="btn btn-success dropdown-toggle" type="button" id="ddbtn" data-toggle="dropdown">下拉菜单<span class="caret"></span></button><ul class="dropdown-menu" id="ddmenu" style="margin-top: -1px;"><li class="dropdown-header">标题1</li><li><a href="#">菜单1</a></li><li><a href="#">菜单2</a></li><li role="separator" class="divider"></li><li class="dropdown-header">标题2</li><li><a href="#">菜单3</a></li><li><a href="#">菜单4</a></li></ul></div>
$(function () {$("#ddbtn").mouseenter(function () {$(this).dropdown("toggle");}).mouseleave(function () {$(this).dropdown("toggle");});$("#ddmenu").mouseenter(function () {$("#ddbtn").dropdown("toggle");}).mouseleave(function () {$("#ddbtn").dropdown("toggle");});});
自己写一遍,加深存在感,详情参考官方文档:/components/#dropdowns