Skip to main content

组件

十几种可以重复使用的组件,包括按钮、下拉菜单、输入组、导航、提示框等。

--本章内容翻译由:樊潇洁友情提供

弹出菜单

弹出菜单是可触发的、上下文叠加显示链接列表和别的内容。它们可以与Bootstrap内置的弹出菜单JavaScript插件交互。它通过点击触发,而不是通过鼠标悬停悬浮。这是一个故意设计决策

内容

示例

把弹出菜单的触发器以及弹出菜单包裹在一个.dropdown中,或者其它声明了position:relative;的元素中。然后,添加菜单的HTML。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

按钮元素

你可以视情况在你的弹出菜单中使用<button>元素,而不是<a>元素。

<div class="dropdown open">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <button class="dropdown-item" type="button">Action</button>
    <button class="dropdown-item" type="button">Another action</button>
    <button class="dropdown-item" type="button">Something else here</button>
  </div>
</div>

对齐

默认情况下,一个弹出菜单的菜单是自动放置在父元素下面,与父元素左侧对齐。给.dropdown-menu添加.dropdown-menu-right类能使菜单向右侧对齐。

Heads up! Dropdowns are positioned only with CSS and may need some additional styles for exact alignment.

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</div>

菜单头部

在任何一个弹出菜单添加一个头部以标记活动的分区。

<div class="dropdown-menu">
  <h6 class="dropdown-header">Dropdown header</h6>
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
</div>

菜单分隔线

使用一个分隔线来对相关的菜单项分组。

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Action</a>
  <a class="dropdown-item" href="#">Another action</a>
  <a class="dropdown-item" href="#">Something else here</a>
  <div class="dropdown-divider"></div>
  <a class="dropdown-item" href="#">Separated link</a>
</div>

禁用的菜单项

对弹出菜单中的某一项添加.disabled类,可以把它们样式化为不可用

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  <a class="dropdown-item disabled" href="#">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

用法

依靠数据属性或者JavaScript,通过切换菜单项的父元素上的.open类,弹出菜单插件可以切换内容(弹出菜单)的可见性。

在移动设备上,打开一个弹出菜单会添加一个.dropdown-backdrop作为轻触区域,如果在菜单外面轻触时弹,菜单会关闭。这是支持iOS设备的要求。这意味着在移动设备上,从一个打开的弹出菜单切换到另一个弹出菜单至少需要两次轻触

注意:data-toggle-"dropdown"属性是关闭弹出菜单的菜单在应用程序级别的依靠。所以最好一直使用它。

利用数据属性

给一个链接或者按钮添加一个data-toggle="dropdown"以切换一个弹出菜单。

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

为了保持URL与链接按钮交互,请使用data-target属性而不是href="#"

<div class="dropdown">
  <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </a>

  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

利用JavaScript

通过JavaScript调用弹出菜单:

$('.dropdown-toggle').dropdown()

仍然需要data-toggle="dropdown"

无论你是通过JavaScript调用弹出菜单的,还是通过使用data-api调用弹出菜单的,弹出菜单的触发器元素上面都必须带有data-toggle="dropdown"属性。

选项

方法

方法 描述
$().dropdown('toggle') 对给定的导航条或轻触导航触发弹出菜单的菜单

事件

所有的弹出菜单事件都是在.dropdown-menu的父元素上触发的,这个父元素都有一个relatedTarget属性,它的值是触发的锚元素。

事件 描述
show.bs.dropdown 当调用显示实例的方法时,会立即触发该事件。
shown.bs.dropdown 当弹出菜单已经对用户可见时(需要等待CSS 过渡完成),会触发该事件。
hide.bs.dropdown 当调用隐藏实例的方法时,会立即触发该事件。
hidden.bs.dropdown 当弹出菜单已经对用户不可见时(需要等待CSS 过渡完成),会触发该事件。
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})