Dropdown menus are toggleable and are contextual menus that display links in a list format. This can be achieved by interacting with the Dropdown JavaScript plugin.

To use a dropdown menu, just add a dropdown menu in class .dropdown . The following example demonstrates a basic drop-down menu:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu"
            data-toggle="dropdown">分类
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">科技</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">人文</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
    </ul>
</div>

1 option

1.1 Alignment

Align the dropdown menu to the right by .dropdown-menuadding a class to it. .pull-rightThe following example demonstrates this:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu2"
            data-toggle="dropdown">分类
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu2">
       ...
    </ul>
</div>

1.2 Title

You can use class dropdown-headerto add a title to the label area of the dropdown menu. The following example demonstrates this:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu"
            data-toggle="dropdown">分类
        <span class="caret"></span>
    </button>

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
        <li role="presentation" class="dropdown-header">大分类</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">科技</a>
        </li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">人文</a>
        </li>
        <li role="presentation" class="divider"></li>
        <li role="presentation" class="dropdown-header">明细分类</li>
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </li>
    </ul>
</div>

2 more examples

kind	describe
.dropdown	Specify the drop-down menu, the drop-down menu is wrapped in .dropdown
.dropdown-menu	Create a dropdown menu
.dropdown-menu-right	right-aligned drop-down menu
.dropdown-header	Add title to drop down menu
.dropup	Specifies a drop-down menu that pops up
.disabled	Disabled items in dropdown menu
.divider	Divider in drop down menu

2.1 dropup

<div class="dropup">
    <button ...>
      ...
    </button>

    <ul ...>
        ...
    </ul>
</div>

2.2 disabled

...
<li role="presentation" class="disabled">
    <a role="menuitem" tabindex="-1" href="#">科技</a>
</li>
...

Bootstrap Dropdowns