search
HomeWeb Front-endBootstrap TutorialAn in-depth analysis of the drop-down menu component in Bootstrap

An in-depth analysis of the drop-down menu component in Bootstrap

Related recommendations: "bootstrap Tutorial"

The drop-down menu component in the bootstrap framework is an independent component. According to different version, its corresponding file:

less. The corresponding source code file is: dropdowns.less

sass. The corresponding source code file is: _dropdowns. scss

When using the drop-down menu built by bootstrap, you must call the bootstrap.js file provided by the bootstrap framework. For the uncompiled version, you can find a file named dropdown.js under js, and you can also call this file. You can also call the compressed file bootstrap.min.js

Since the interactive effects of bootstrap components all rely on plug-ins written by the jQuery library, you must be sure before using bootstrap.min.js First load jQuery.min.js

Example on the official website:

<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" 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="#">下拉菜单项</a></li>

   …
   
<li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

Detailed explanation:

1. Use a dropdown The container wraps the entire drop-down menu element

<div class="dropdown"></div>

2, uses the

data-toggle=“dropdown”

3. The drop-down menu item uses an ul list and defines a class named dropdown-menu

<ul class="dropdown-menu"></ul>

The drop-down menu item in bootstrap is hidden by default, dropdown-menu Set display: none

.dropdown-menu {

  position: absolute;/*设置绝对定位,相对于父元素div.dropdown*/

  top: 100%;/*让下拉菜单项在父菜单项底部,如果父元素不设置相对定位,该元素相对于body元素*/

  left: 0;

  z-index: 1000;/*让下拉菜单项不被其他元素遮盖住*/

  display: none;/*默认隐藏下拉菜单项*/

  float: left;

  min-width: 160px;

  padding: 5px 0;

  margin: 2px 0 0;

  font-size: 14px;

  list-style: none;

  background-color: #fff;

  background-clip: padding-box;

  border: 1px solid #ccc;

  border: 1px solid rgba(0, 0, 0, .15);

  border-radius: 4px;

  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);

  box-shadow: 0 6px 12px rgba(0, 0, 0, .175); }

When the user clicks on the parent menu, the drop-down menu will be displayed. When the user clicks again, the drop-down menu will continue to be hidden

An in-depth analysis of the drop-down menu component in Bootstrap

An in-depth analysis of the drop-down menu component in Bootstrap

Detailed explanation:

Add or open an open to the parent container p.dropdown through js to control the display of the drop-down menu Or hidden, that is, by default, p.dropdown does not have the class name open. When the user clicks for the first time, p.dropdown will add the class name open. When the user clicks again, the class name in the p.dropdown container will be Removed

.open > .dropdown-menu {
display: block; 
}

Drop-down separator

Assuming that the drop-down menu has two groups, then an empty

  • can be added between the groups, And add the class name .piderl to this li to implement the function of adding drop-down separators
    .dropdown-menu .divider {
    
      height: 1px;
    
      margin: 9px 0;
    
      overflow: hidden;
    
      background-color: #e5e5e5; 
    }

    An in-depth analysis of the drop-down menu component in Bootstrap

    Menu title

    In order to make this Grouping is more obvious, and you can also add a header title to each group.

    <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    
    下拉菜单
    
    <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="dropdown-header">第一部分菜单头部</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="#">下拉菜单项</a></li> </ul> </div>

    css style:

    .dropdown-header {
    
      display: block;
    
      padding: 3px 20px;
    
      font-size: 12px;
    
      line-height: 1.42857143;
    
      color: #999;
     }

    The drop-down menu in the bootstrap framework is left aligned by default. If you want the drop-down menu to be right-aligned relative to the parent container, you can add a class to dropdown-menu. dropdown -menu-right, note that starting from v3.1.0, it is no longer recommended to use the .pull-right class for drop-down menus

    <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    
      下拉菜单
      
    <span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1">
    
       …
      
    </ul> </div>
    .dropdown-menu-right {
    
      right: 0;
    
      left: auto;
       }
    
    .dropdown{
    float: left; 
    }

    Menu item status

    Drop-down menu The default states include hover state: hover and focus state: focus

    .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    
      color: #262626;
    
      text-decoration: none;
    
      background-color: #f5f5f5; }

    The drop-down menu also has the current state and the disabled state. To use these two states, you only need to add the corresponding class name to the corresponding menu item

    <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    
      下拉菜单
      
    <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation" class="active"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li>
    
        ….
        
    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul> </div>

    CSS:

    .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {
    
      color
    : #fff;
    
      text-decoration
    : none;
    
      background-color
    : #428bca;
    
      outline
    : 0; }
    
    .dropdown-menu > .disabled > a,
    .dropdown-menu > .disabled > a:hover,
    .dropdown-menu > .disabled > a:focus 
    {
      color: #999; 
     }
    
    .dropdown-menu > .disabled > a:hover,
    .dropdown-menu > .disabled > a:focus 
    {
    
      text-decoration: none;
    
      cursor: not-allowed;
    
      background-color: transparent;
    
      background-An in-depth analysis of the drop-down menu component in Bootstrap: none;
    
      filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); 
    }

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

  • The above is the detailed content of An in-depth analysis of the drop-down menu component in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!

    Statement
    This article is reproduced at:博客园. If there is any infringement, please contact admin@php.cn delete
    Using Bootstrap: Creating Modern and Mobile-First WebsitesUsing Bootstrap: Creating Modern and Mobile-First WebsitesApr 30, 2025 am 12:08 AM

    Bootstrap is an open source front-end framework for creating modern, responsive, and user-friendly websites. 1) It provides grid systems and predefined styles to simplify layout and development. 2) Mobile-first design ensures compatibility and performance. 3) Through custom styles and components, the website can be personalized. 4) Performance optimization and best practices include selective loading and responsive images. 5) Common errors such as layout problems and style conflicts can be resolved through debugging techniques.

    Bootstrap and Web Design: Best Practices and TechniquesBootstrap and Web Design: Best Practices and TechniquesApr 29, 2025 am 12:15 AM

    Bootstrap is an open source front-end framework developed by Twitter, suitable for building responsive websites quickly. 1) Its grid system is based on a 12-column structure, allowing for the creation of flexible layouts. 2) Responsive design function enables the website to adapt to different devices. 3) The basic usage includes building a navigation bar, and the advanced usage involves card components. 4) Common errors such as misuse of grid systems can be avoided by correctly setting the column width. 5) Performance optimization includes loading only necessary components, using CDN and file compression. 6) Best practices emphasize tidy code, custom styles and responsive design.

    Bootstrap and React: Combining Frameworks for Web DevelopmentBootstrap and React: Combining Frameworks for Web DevelopmentApr 28, 2025 am 12:08 AM

    The reason for combining Bootstrap and React is their complementarity: 1. Bootstrap provides predefined styles and components to simplify UI design; 2. React improves efficiency and performance through component development and virtual DOM. Use it in conjunction to enjoy fast UI construction and complex interaction management.

    From Zero to Bootstrap: Getting Started QuicklyFrom Zero to Bootstrap: Getting Started QuicklyApr 27, 2025 am 12:07 AM

    Bootstrap is an open source front-end framework based on HTML, CSS and JavaScript, designed to help developers quickly build responsive websites. Its design philosophy is "mobile first", providing a wealth of predefined components and tools, such as grid systems, buttons, forms, navigation bars, etc., simplifying the front-end development process, improving development efficiency, and ensuring the responsiveness and consistency of the website. Using Bootstrap can start with a simple page and gradually add advanced components such as cards and modal boxes. Best practices for optimizing performance include customizing Bootstrap, using CDNs, and avoiding overuse of class names.

    React and Bootstrap: Enhancing User Interface DesignReact and Bootstrap: Enhancing User Interface DesignApr 26, 2025 am 12:18 AM

    React and Bootstrap can be seamlessly integrated to enhance user interface design. 1) Install dependency package: npminstallbootstrapreact-bootstrap. 2) Import the CSS file: import'bootstrap/dist/css/bootstrap.min.css'. 3) Use Bootstrap components such as buttons and navigation bars. With this combination, developers can leverage React's flexibility and Bootstrap's style library to create a beautiful and efficient user interface.

    Integrating Bootstrap into React: A Practical GuideIntegrating Bootstrap into React: A Practical GuideApr 25, 2025 am 12:04 AM

    The steps to integrate Bootstrap into a React project include: 1. Install the Bootstrap package, 2. Import the CSS file, 3. Use Bootstrap class name to style elements, 4. Use React-Bootstrap or reactstrap library to use Bootstrap's JavaScript components. This integration utilizes React's componentization and Bootstrap's style system to achieve efficient UI development.

    What is Bootstrap Used For? A Practical ExplanationWhat is Bootstrap Used For? A Practical ExplanationApr 24, 2025 am 12:16 AM

    Bootstrapisapowerfulframeworkthatsimplifiescreatingresponsive,mobile-firstwebsites.Itoffers:1)agridsystemforadaptablelayouts,2)pre-styledelementslikebuttonsandforms,and3)JavaScriptcomponentssuchascarouselsforenhancedinteractivity.

    Bootstrap: From Layouts to ComponentsBootstrap: From Layouts to ComponentsApr 23, 2025 am 12:06 AM

    Bootstrap is a front-end framework developed by Twitter that integrates HTML, CSS and JavaScript to help developers quickly build responsive websites. Its core functions include: Grid system and layout: based on 12-column design, using flexbox layout, and supporting responsive pages of different device sizes. Components and styles: Provide a rich library of component, such as buttons, modal boxes, etc., and you can achieve beautiful effects by adding class names. How it works: Rely on CSS and JavaScript, CSS uses LESS or SASS preprocessors, and JavaScript relies on jQuery to achieve interactive and dynamic effects. Through these features, Bootstrap greatly improves development

    See all articles

    Hot AI Tools

    Undresser.AI Undress

    Undresser.AI Undress

    AI-powered app for creating realistic nude photos

    AI Clothes Remover

    AI Clothes Remover

    Online AI tool for removing clothes from photos.

    Undress AI Tool

    Undress AI Tool

    Undress images for free

    Clothoff.io

    Clothoff.io

    AI clothes remover

    Video Face Swap

    Video Face Swap

    Swap faces in any video effortlessly with our completely free AI face swap tool!

    Hot Tools

    MantisBT

    MantisBT

    Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

    MinGW - Minimalist GNU for Windows

    MinGW - Minimalist GNU for Windows

    This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

    SublimeText3 English version

    SublimeText3 English version

    Recommended: Win version, supports code prompts!

    PhpStorm Mac version

    PhpStorm Mac version

    The latest (2018.2.1) professional PHP integrated development tool

    EditPlus Chinese cracked version

    EditPlus Chinese cracked version

    Small size, syntax highlighting, does not support code prompt function