A brief discussion of the drop-down menu class (dropdown-menu) in Bootstrap

Bootstrap has a complete set of drop-down menu components built in. This article will introduce you to the drop-down menu class in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

The drop-down menu is a very common effect, used to display a switchable and related set of links. It can save web page layout space and make the web page layout simple and elegant. sequence.

Bootstrap has a complete set of built-in drop-down menu components that can be used for different elements, such as navigation, buttons, etc. Combined with other elements, you can also design various menu effects.

The interactive behavior of the drop-down menu also requires the support of the drop-down menu plug-in (dropdown.js), so when using the drop-down menu component, the dropdown.js file must also be introduced.

Related recommendations: "bootstrap Tutorial"

Creating drop-down menus

The drop-down menus in Bootstrap are all based on lists. Yes, you can use unordered list (

) or ordered list (

). Description list (

) is not supported yet.

Add the .dropdown-menu class to

or

to create a drop-down menu. For example:

<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
  <li><a tabindex="-1" href="#">Action</a></li>
  <li><a tabindex="-1" href="#">Another action</a></li>
  <li><a tabindex="-1" href="#">Something else here</a></li>
</ul>

The effect is shown in Figure 3‑8:


Figure 3-8 Drop-down menu

Normally, the drop-down menu needs to be Hidden by default and only shown when the user clicks a button or link. Therefore, you need to wrap the hyperlink or button and drop-down menu in a container with class="dropdown" or position: relative; and add the data-toggle="dropdown" attribute to the button or link. This allows the drop-down menu to be hidden by default and only be activated and displayed when a button or link is clicked. For example:

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

At this time, when previewing in the browser, you can see a button. If the button is clicked, the drop-down menu will be activated and displayed. The effect is shown in Figure 3-9:


Figure 3-9 Activate the drop-down menu

By default, the submenu pops up in the form of a drop-down menu. If you want to pop up in pull-up form, just wrap the entire drop-down menu in a .dropup container:

<div class="dropup">
…
</div>

The effect is shown in Figure 3‑10:


Figure 3-10 Pull-up menu

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion of the drop-down menu class (dropdown-menu) in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!