Bootstrap 下拉菜单
-
定义和使用
Bootstrap 下拉菜单是可切换菜单,允许用户从预定义列表中选择一个值:
尝试一下<div class="container"> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉菜单 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> </div>
输出结果如下:示例说明:.dropdown类指示一个下拉菜单。要打开下拉菜单,请使用按钮或带有类 .dropdown-toggle 和 data-toggle="dropdown" 属性的链接。将 .dropdown-menu 类添加到 <div> 元素中以实际构建下拉菜单。 然后将 .dropdown-item 类添加到下拉菜单内的每个元素(链接或按钮)。 -
下拉分隔线
.dropdown-divider 类用于使用细边框分隔下拉菜单中的链接:
尝试一下<div class="container"> <div class="dropdown"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 下拉按钮 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">链接1</a> <a class="dropdown-item" href="#">链接2</a> <a class="dropdown-item" href="#">链接3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">链接4</a> </div> </div> </div>
输出结果如下: -
-
禁用和激活项
用 .active 类突出显示特定的下拉项(添加蓝色背景色)。要禁用下拉菜单中的项,请使用 .disabled 类(悬停时获得浅灰色文本颜色和“禁止停车标志”图标):
尝试一下<a class="dropdown-item active" href="#">激活项</a> <a class="dropdown-item disabled" href="#">禁用项</a>
输出结果如下: -
下拉位置
您还可以通过将 .dropright 或 .dropleft 类添加到 dropdown 元素来创建 "dropright" 或 "dropleft" 菜单。请注意,插入符/箭头是自动添加的:
尝试一下<div class="dropdown dropright"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 箭头向右的下拉 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div> <div class="dropdown dropleft"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 箭头向左的下拉 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> <a class="dropdown-item" href="#">Link 3</a> </div> </div>
要右对齐下拉菜单,请将 .dropdown-menu-right 类添加到具有 .dropdown-menu 的元素中:
尝试一下<div class="dropdown-menu dropdown-menu-right">
如果希望下拉菜单向上扩展而不是向下扩展,请将具有 class="dropdown" 的 <div> 元素更改为 "dropup": -
带下拉菜单的分组按钮
下面示例演示了带下拉菜单的分组按钮:
尝试一下<div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">三星</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 索尼 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">索尼1</a> <a class="dropdown-item" href="#">索尼2</a> </div> </div> </div> </div>
输出结果如下: -
拆分按钮下拉菜单
下面示例演示了拆分按钮下拉菜单:
尝试一下<div class="container"> <div class="btn-group"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"> </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Link 1</a> <a class="dropdown-item" href="#">Link 2</a> </div> </div> </div>
输出结果如下: -
带有/下拉菜单的垂直按钮组
下面示例演示了带有/下拉菜单的垂直按钮组:
尝试一下<div class="container"> <div class="btn-group-vertical"> <button type="button" class="btn btn-primary">Apple</button> <button type="button" class="btn btn-primary">三星</button> <div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"> 索尼 </button> <div class="dropdown-menu"> <a class="dropdown-item" href="#">索尼1</a> <a class="dropdown-item" href="#">索尼2</a> </div> </div> </div> </div>
-