Skocz do: Nawigacja, szukaj

Dropdowns

Toggleable, contextual menu for displaying lists of links in wiki content.

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;.

  <div class="btn-group">
    <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></div>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation">[[Action]]</li>
        <li role="presentation">[[Another action]]</li>
        <li role="presentation">[[Something else here]]</li>
        <li role="presentation">[[Another link]]</li>
      </ul>
     </div>

By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add .dropdown-menu-right to a .dropdown-menu to right align the dropdown menu.

May require additional positioning

Dropdowns are automatically positioned via CSS within the normal flow of the document. This means dropdowns may be cropped by parents with certain overflow properties or appear out of bounds of the viewport. Address these issues on your own as they arise.

Deprecated .pull-right alignment

As of v3.1.0, we've deprecated .pull-right on dropdown menus. To right-align a menu, use .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

Add a header to label sections of actions in any dropdown menu.

   <div class="btn-group">
    <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></div>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation" class="dropdown-header">Dropdown header</li>
        <li role="presentation">[[Action]]</li>
        <li role="presentation">[[Another action]]</li>
        <li role="presentation">[[Something else here]]</li>
        <li role="presentation" class="dropdown-header">Dropdown header</li>
        <li role="presentation">[[Seperated link]]</li>
      </ul>
     </div>

Add a divider to separate series of links in a dropdown menu using the divider class

   <div class="btn-group">
    <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></div>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
        <li role="presentation">[[Action]]</li>
        <li role="presentation">[[Another action]]</li>
        <li role="presentation">[[Something else here]]</li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">[[Seperated link]]</li>
      </ul>
     </div>