Does bootstrap have a pull-up menu?

bootstrap has a pull-up menu; the button menu can not only be pulled down, but also pulled up. You need to change the default drop-down to a pull-up. You only need to add ".dropup" to the parent element to trigger the drop-down menu above the element. That's it, the syntax is "

".

The operating environment of this tutorial: Windows 10 system, bootstrap version 5, DELL G3 computer

bootstrap has a pull-up menu

Trigger the dropdown menu above the element by adding .dropup to the parent element.

The button menu can not only be pulled down, but also pulled up. To change the default drop-down to pull-up, just add a .dropup class to the .btn-group container. For example:

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>
<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

Copy after login

Output result:

Expand knowledge

First we should Understand: the drop-down menu is composed of: buttons, drop-down icons and unordered lists.

Dropdown menu triggers and dropdown menus are included in .dropdown.

In the button tag, the attributes used are

class="btn btn-default dropdown-toggle"     type="button" 
                id="dropdownMenu1"         data-toggle="dropdown"         aria-haspopup="true" 
                aria-expanded="true"

Copy after login

In the span tag, the attribute values ​​used are class = "caret"

Unordered list< ul> Element                                                                                                                                                                                                                                                                                        been been been been been been menu-left left aligned.

Order List & LT; OL & GT; Element

# & LT; OL & GT; Label Definition Order List

Ol is commonly used in Start: represents the starting value of the orderly list .

ol The commonly used attributes include Type: Standard the label type used in the list.

# & lt; li & gt; element

# & lt; li & gt; label definition list items.

# & lt; li & gt; labels can be used in orderly lists (& lt; & gt;) and non -serial lists (& lt; ul & gt;).

The split button to change some marks, and change the tribe of

Rrree

to FLASE.

              plus

<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">

Copy after login

Related recommendations:

bootstrap tutorial

The above is the detailed content of Does bootstrap have a pull-up menu?. For more information, please follow other related articles on the PHP Chinese website!