A brief discussion of the drop-down menu class (dropdown-menu) in Bootstrap-Bootstrap Tutorial-php.cn

Home

Web Front-end

Bootstrap Tutorial

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

青灯夜游

Mar 23, 2021 am 11:31 AM

bootstrapDrop-down menu

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.

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

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 (

) is not supported yet.

Add the .dropdown-menu class to

<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:

A brief discussion of the drop-down menu class (dropdown-menu) in Bootstrap
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:

激活A brief discussion of the drop-down menu class (dropdown-menu) in Bootstrap
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:

A brief discussion of the drop-down menu class (dropdown-menu) in Bootstrap
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!

Statement

This article is reproduced at:csdn. If there is any infringement, please contact admin@php.cn delete

How to center navbar items in Bootstrap?Jul 23, 2025 am 02:43 AM

To center the Bootstrap navigation bar project horizontally, it is recommended to use the Flexbox method. 1. Add mx-auto class to .navbar-nav to center the navigation bar content horizontally in the container and ensure that the parent element width is sufficient; 2. Or set .navbar-nav to flex layout through custom CSS and use justify-content:center to achieve center; 3. Pay attention to keeping the container width full of one row, avoid multiple .navbar-nav interference, and handle the mobile folding menu style separately to ensure compatibility.

How to make a transparent navbar in Bootstrap?Jul 23, 2025 am 02:23 AM

The core of implementing a transparent navigation bar in Bootstrap is to clear the default style and adjust the color and layout. First, set the background color to be transparent and remove shadows and borders. Second, deal with the background changes that may be triggered during scrolling, then set the link color and hover effect according to the background. Finally, if you use fixed positioning, you need to add a top margin to the body to avoid the content being blocked. 1. Set the background-color of .navbar to transparent and remove box-shadow and border; 2. If using Bootstrap5, check and remove bg-light or bg-dark classes; 3. Add .navbar.scrolled style to ensure scrolling

How to customize Bootstrap navbar with CSS?Jul 23, 2025 am 01:32 AM

TocustomizeaBootstrapnavbarwithCSS,followthesekeysteps:1.Changebackgroundandtextcolorbyoverriding.navbarand.navbar-nav.nav-linkstylesorusingCSSvariables.2.Adjustspacingwithpaddingon.navbar-brandand.nav-link,andalignitemsusingflexboxutilitieslikejusti

How to use SASS to customize the Bootstrap navbar?Jul 23, 2025 am 01:31 AM

TocustomizeaBootstrapnavbarusingSASS,youcanleveragevariables,customstyles,andSASSmaps.1.OverrideBootstrap’sSASSvariablessuchas$navbar-light-bgand$navbar-padding-yina\_custom-variables.scssfilebeforeimportingBootstrap.2.WritecustomSASSrulestargetingel

Bootstrap 5 offcanvas navbar exampleJul 22, 2025 am 01:28 AM

How to create and optimize OffcanvasNavbar for Bootstrap5? 1. Use the built-in offcanvas component to combine navbar, and build the basic structure by adding key categories such as navbar-expand-lg, offcanvas, data-bs-toggle, etc.; 2. In order to make offcanvas better adapt to different devices, use the d-lg-none control button to only display on the small screen, and cooperate with navbar-expand-lg to control navigation responsive expansion; 3. Frequently asked questions to optimize the optimization of the menu item: add data-bs-dismiss to achieve automatic closing of offcanvas after clicking, and add bg-da

How to create a double row navbar in Bootstrap?Jul 22, 2025 am 01:05 AM

The core method of implementing a dual-row navigation bar in Bootstrap is to combine structures and style adjustments. 1. Use nested containers to build a double-row structure, use two independent .navbars or .containers to place the top and bottom navigation content respectively, the first line places secondary information such as language switching and contact information, and the second line is used as the main menu; 2. Use Flex layout to merge into a container, set d-flexflex-column through the outer div to achieve vertical stacking, and manage styles and widths uniformly; 3. Optimization details include controlling spacing, responsive hiding the first line content, style isolation, and color matching coordination. These steps allow for a clear structure and responsive and friendly dual-line navigation bar.

Bootstrap Grid System: differences between versionsJul 22, 2025 am 12:13 AM

Bootstrap'sGridSystemevolvedsignificantlyfromversion2to5,enhancingresponsivenessandflexibility.1)Bootstrap3introducedafluid12-columngridforbettermobileadaptability.2)Bootstrap4refinedthiswithflexboxandremovedthexstierforeasiersmall-screendesign.3)Boo

How to add a logo to the Bootstrap navbar?Jul 22, 2025 am 12:04 AM

Four key points to follow to add a logo in the Bootstrap navigation bar. 1. Use navbar-brand to wrap logo images, it is recommended to set width and height or use img-fluid class to maintain responsiveness; 2. Use custom CSS to adjust the size and position of the logo, such as max-height and object-fit:contain, and use ms-auto to control the alignment; 3. Use responsive tool classes such as d-noned-md-inline-block to display logos of different sizes to optimize the mobile experience; 4. Coordinate the layout and make sure to use container-fluid and check navbar-n

See all articles