This is the 23rd day of my participation in the More text Challenge. For more details, see more text Challenge
“Bootstrap5 zero base to master” an old liu original, strive for a daily update section.
23.1 Bootstrap5 Drop-down menu components
Dropdowns and the Select list in a form have many similarities in appearance, but they are fundamentally different. Dropdowns use a Select form, while Dropdowns use div and CSS implementations.
Dropdown lists are toggable context overrides for displaying lists of links, and so on. They interact with the included Bootstrap dropdown JavaScript plug-in. They are switched by clicking, not by hovering; This is a conscious design decision, and if you need to hover toggle, you can do it with JS.
23.2 the sample
23.2.1 Single Button
Wrap the dropdown menu (button or link) and the drop-down menu in dropdown to become a drop-down menu.
The drop-down list can be triggered from the A or Button element to better meet your potential needs. The example shown here uses semantic UL elements where appropriate, but supports custom tags.
Any single.BTN can become a dropdown toggle with some markup changes. Here’s how to use them with the Button element:
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > dropdown menu < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" Data-bs-toggle ="dropdown" aria-expanded="false"> </button> <ul class="dropdown-menu" Aria - labelledby = "dropdownMenuButton1" > < li > < a class = "dropdown can - item" href = "#" > submenus 1 < / a > < / li > < li > < a class = "dropdown can - item" Href = "#" > menu 2 < / a > < / li > < li > < a class = "dropdown can - item" href = "#" > submenus 3 < / a > < / li > < li > < hr class = "dropdown can - divider" > < / li > < li > < a Class = "dropdown can - item" href = "#" > menu 4 < / a > < / li > < / ul > < / div > < br > < br > < br > < div class = "dropdown can" > < a class = "BTN btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" Aria-expanded ="false"> a link dropdown menu </a> <ul class="dropdown-menu" aria-Labelledby ="dropdownMenuLink"> <li><a Class = "dropdown can - item" href = "#" > menu 1 < / a > < / li > < li > < a class = "dropdown can - item" href = "#" > menu 2 < / a > < / li > < li > < a Divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider </li> <li> Href = "#" > menu 4 < / a > < / li > < / ul > < / div > < / div > < script SRC = ".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the code
There is no difference in look and feel between the two menus.
23.2.2 button group
A button group is a group of buttons on the same row. By default, since menus are on their own row by default, the above example has several line breaks.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Button Dropdown menu</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sub menu 4</a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">A link drop-down menu</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sub menu 4</a></li>
</ul>
</div>
Copy the code
23.2.3 Split button
By default, clicking on any area of the button will bring up a drop-down menu, but by adding a dropdown-toggle-split to the drop-down caret with appropriate spacing, the horizontal padding on both sides of the caret is reduced by 25% and the margin-left added for the normal button dropdown is removed. These additional changes focus the caret in the split button and provide appropriate space next to the main button.
The split button can only be used for a group of buttons. The drop-down menu will only pop up if you click the triangle symbol on the button, and nothing else will pop up if you click the button. The first is a normal button and the second is a split button
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Normal drop-down menu</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
</ul>
</div>
<br>
<div class="btn-group">
<button type="button" class="btn btn-secondary">Split the drop-down menu</button>
<button class="btn btn-secondary dropdown-toggle dropdown-toggle-split" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
</ul>
</div>
Copy the code
23.3 Size of the drop-down menu
The button size can be set by adding or adding to the button class. Although the example uses a group of buttons, it works equally well for individual buttons and split buttons. Here is a comparison of the three button sizes:
<div class="btn-group">
<button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Sm drop-down menu</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">The drop-down menu</button>
</div>
<div class="btn-group">
<button class="btn btn-lg btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Lg drop down menu</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary btn-sm" type="button">Sm Split button</button>
<button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
</div>
Copy the code
Note: In general, menus that do not require popup options are omitted in order to save code.
23.4 Drop-down menu colors
The color of the drop-down menu is exactly the same as the color of the button. Here is the color drop-down menu:
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
primary
</button>
</div>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
secondary
</button>
</div>
<div class="btn-group">
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
success
</button>
</div>
<div class="btn-group">
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
danger
</button>
</div>
<div class="btn-group">
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
warning
</button>
</div>
<div class="btn-group">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
info
</button>
</div>
<div class="btn-group">
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
light
</button>
</div>
<div class="btn-group">
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
dark
</button>
</div>
<div class="btn-group">
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
link
</button>
</div>
Copy the code
23.5 Dark drop-down list
23.5.1 Dark drop-down list
Select a darker drop-down menu to match a darker navigation bar or custom style by adding dropdown-menu-Dark to an existing Dropdown-Menu. There is no need to change the drop-down items.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">Dark drop-down menu</button>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">The Action option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Option 4</a></li>
</ul>
</div>
Copy the code
23.5.2 Navigation with dark drop-down lists
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">brand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dark drop-down menu</a>
<ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">The Action option 1</a></li>
<li><a class="dropdown-item" href="#">Option 2</a></li>
<li><a class="dropdown-item" href="#">Option 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Option 4</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Copy the code
23.6 Direction in which menu items are displayed
The default option of the drop-down menu is to pop down by default. By adding Dropup, DropStart, and Dropend to the drop-down menu container, you can set up, left, and right popup respectively.
The use of these classes is simple, just add them to the container. It should be noted that these direction Settings are said in the case of enough space. If it pops up, but there is not enough space above, it will automatically pop down. The same goes for left and right
<div class="text-center">
<br><br><br><br><br><br>
<div class="dropdown dropup">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">upward</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item active" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
</ul>
</div> <br><br><br>
<div class="dropdown dropstart">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">To the left</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
</ul>
</div>
<br><br><br>
<div class="dropdown dropend">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-bs-toggle="dropdown" aria-expanded="false">To the right</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<li><a class="dropdown-item active" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
</ul>
</div>
</div>
Copy the code
23.7 the menu items
23.7.1 Use other Content
In the past, the drop-down menu content had to be a link, but Bootstrap5 no longer is. You can now choose to use the Button element in the drop-down menu instead of just using a.
Non-interactive drop-down items can also be created using the Dropdown-item text. Feel free to further style with custom CSS or text tools. By default, use the link and button options, the mouse hover option will have a shadow, and the text option will have five shadow effects.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">Other options drop down menu</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><button class="dropdown-item" type="button">Button Option 1</button></li>
<li><button class="dropdown-item" type="button">Button Option 2</button></li>
<li><span class="dropdown-item-text">Text options</span></li>
</ul>
</div>
Copy the code
23.7.2 Enabling or Disabling
Add active to the item in the drop-down list to set it to the active style. Add Disabled to the item in the drop-down list to set its style to Disabled.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-bs-toggle="dropdown" aria-expanded="false">The drop-down menu</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item active" href="#">Activate the option</a></li>
<li><a class="dropdown-item" href="#">General options</a></li>
<li><a class="dropdown-item disabled" href="#">To disable the option</a></li>
</ul>
</div>
Copy the code
23.7.3 Align menu items to the right
By default, the drop-down menu is automatically positioned 100% from the top of the parent menu and along the left side of the parent menu. You can add dropdown-menu-end to dropdown-menu to right-align the drop-down menu.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">Right aligned menu items are too short to show</button>
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Sub menu 1</a></li>
<li><a class="dropdown-item" href="#">Sub menu 2</a></li>
<li><a class="dropdown-item" href="#">Sub menu 3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Sub menu 4</a></li>
</ul>
</div>
Copy the code
23.7.4 Right-click menu items in response
To use responsive alignment, disable dynamic positioning by adding a data-bs-display=”static” property to the button and use the responsive variable class. In the dropdown can add menu dropdown can – menu {- sm | | – md – lg | – xl | – XXL} – end.
<! doctype html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content=""> <meta name="description" content=""> <link href=".. / bootstrap5 / bootstrap. Min. CSS "rel =" stylesheet "> < title > dropdown menu < / title > < / head > < body > < div class =" container "> < br > < br > < br > <div class="btn-group"> <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" Data-bs-display ="static" aria-expanded="false"> Menu item responsive right align, </button> <ul class="dropdown-menu dropdown-menu-LG-end "aria- Labelledby ="dropdownMenuButton1"> <li><a Class = "dropdown can - item" href = "#" > menu 1 < / a > < / li > < li > < a class = "dropdown can - item" href = "#" > menu 2 < / a > < / li > < li > < a Divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider = divider </li> <li> Href = "#" > menu 4 < / a > < / li > < / ul > < / div > < / div > < script SRC = ".. /bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>Copy the codeThis is left align before lg breakpoint, right align after breakpoint, relatively simple will not demonstrate, provide the complete code, interested to try.
23.7.5 Putting menu items into forms
Put the form in a drop-down menu, or put it in a drop-down menu, and then use the margin or fill utility to give it the negative space it needs.
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">The menu item contains the login form</button><div class="dropdown-menu"> <form class="px-4 py-3"> <div class="mb-3"> <label for="exampleDropdownFormEmail1" Class = "the form - the label" > email < / label > < input type = "email" class = "the form - control" id = "exampleDropdownFormEmail1" placeholder="[email protected]"> </div> <div class="mb-3"> <label for="exampleDropdownFormPassword1" Class = "the form - the label" > password < / label > < input type = "password" class = "the form - control" id = "exampleDropdownFormPassword1" placeholder="Password"> </div> <div class="mb-3"> <div class="form-check"> <input type="checkbox" Class ="form-check-input" id="dropdownCheck"> <label class="form-check-label" for="dropdownCheck"> </div> <div class=" divider"></div> <a Class = "dropdown can - item" href = "#" > haven't account, click here to register < / a > < a class = "dropdown can - item" href = "#" > forgot password < / a > < / div > < / div >Copy the code
Due to the limited space, this article has made a brief introduction to the drop-down menu, which is generally enough for common use. If you need to learn more about the usage of the drop-down menu, please refer to the Bootstrap Chinese documentation > Components > Drop-down menu related sections.
Today’s course here, please pay attention to me, timely learning an old Liu original “Bootstrap5 zero foundation to master” section 24 of the Pagination navigation component usage, from the word can also be seen, the button group is a combination of multiple buttons.
If this post helped you, please click “like”.