The drop-down menu is used to display a toggleable, contextualized menu of the link list.
1. Case
Wrap the drop-down menu trigger and drop-down menu in .dropdown, and then add the HTML code that makes up the menu.
<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
You can find through the above code that there may be many unfamiliar style classes or attributes.
There is a Dropdown button and a small icon caret on the right side. Of course, the text of this small icon and button is of the same level.
First, let’s see that there is a dropdown-toggle in the button button and a data-toggle attribute. The list will pop up based on this attribute.
Immediately afterwards, the dropdown-menu of the ul label should be used in conjunction with the style class dropdown-toggle of the button above, and bind the button above through aria-labelledby.
Next, there is a divider in the fourth li tag that is actually a style class for dividing lines.
Maybe I understand this way, but I definitely don’t understand it properly.
2. Alignment options
Add .text-right to the dropdown menu.dropdown-menu to right-align the text.
<div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
Just add a text-right style class to the ul tag in the above code.
3. Title
A set of actions can be marked by adding a title in any drop-down menu.
<h1>Drop down menu</h1> <div> <button type="button" id="dropdownMenu1" data-toggle="dropdown"> Dropdown <span></span> </button> <ul role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li> <li role="presentation"></li> <li role="presentation">Dropdown header</li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li> </ul> </div>
The main thing is to add a .dropdown-header style class in <li role="presentation">Dropdown header</li>.
4. Disabled menu items
Add .disabled to <li> in the drop-down menu to disable the link.
Continue to modify the above code to replace the code in the line of Something else here
Copy the code as follows:<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
Mainly add .disabled style classes in the li tag.
After you run it, you can view the effect. In fact, the effect is similar to the title style above. When you click, a disabled icon will be displayed.
5. Basic cases
1) Button-type drop-down menu
Put any buttons into .btn-group and add the correct menu mark to make a drop-down menu trigger.
Single button drop-down menu
Just change some basic marks and turn the button into a drop-down menu switch.
<div> <button type="button" data-toggle="dropdown"> Action <span></span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </ul></div>
Split Button Pull-down Menu
Similarly, the split button drop-down menu requires the same change mark, but only one more separate button.
<div> <button type="button">Action</button> <div> <button type="button" data-toggle="dropdown"> <span></span> <span>Toggle Dropdown</span> </button> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li></li> <li><a href="#">Separated link</a></li> </div> </div
You can only click on the small icon to appear.
2) Size
The drop-down menu button applies to buttons of all sizes.
<div> <button type="button" data-toggle="dropdown"> Large button <span></span> </button> <ul> ... </ul></div><!-- Small button group --><div> <button type="button" data-toggle="dropdown"> Small button <span></span> </button> <ul> ... </ul></div><!-- Extra small button group --><div> <button type="button" data-toggle="dropdown"> Extra small button <span></span> </button> <ul> ... </ul></div>
Control the size of the button through the style classes .btn-lg, .btn-sm, and .btn-xs.
3) Upward pop-up menu
Adding .dropup to the parent element will make the triggered drop-down menu above the element.
<div> <button type="button">Dropup</button> <button type="button" data-toggle="dropdown"> <span></span> <span>Toggle Dropdown</span> </button> <ul> <!-- Dropdown menu links --> </ul></div>
If you still want to study in depth, you can click here to study and attach 3 exciting topics to you:
Bootstrap learning tutorial
Bootstrap practical tutorial
Bootstrap plug-in usage tutorial
This article mainly introduces the relevant content of the drop-down menu, and then introduces the combination of buttons and drop-down menus. There are quite a lot of changes and the style is also good. I hope everyone likes it.