How to set up bootstrap drop-down list

This chapter will focus on the Bootstrap drop-down menu. Dropdown menus are toggleable and are context menus that display links in a list format. This can be achieved by interacting with the Dropdown JavaScript plugin.

If you need to use the drop-down menu, you only need to add the drop-down menu in class .dropdown. (Recommended learning: Bootstrap video tutorial)

The following example demonstrates the basic drop-down menu:

<div class="dropdown">
    <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation">
            <a role="menuitem" tabindex="-1" href="#">Java</a>
        </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">
            <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
        </li>
    </ul>
</div>

Class	Description
.dropdown	Specify the drop-down menu, and the drop-down menu is wrapped in .dropdown
.dropdown-menu	Create drop-down menu
.dropdown-menu-right	Align the drop-down menu right
.dropdown-header	Add a header to the drop-down menu
.dropup	Specify the drop-down menu that pops up
.disabled	Disabled items in drop-down menu
.divider	Divider line in drop-down menu

For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!

The above is the detailed content of How to set up bootstrap drop-down list. For more information, please follow other related articles on the PHP Chinese website!