This chapter will explain how to use the Bootstrap class to add a drop-down menu to a button. To add a drop-down menu to a button, simply place the button and drop-down menu in a .btn-group . You can also use to indicate that the button acts as a drop-down menu.
The following example demonstrates a basic simple button drop-down menu:
Example
<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">默认 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul></div><div class="btn-group"> <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">原始 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li> <a href="#">功能</a> </li> <li> <a href="#">另一个功能</a> </li> <li> <a href="#">其他</a> </li> <li class="divider"></li> <li> <a href="#">分离的链接</a> </li> </ul></div>
Using the drop-down menu in the Bootstrap framework When using a component, it is very important to use its structure correctly. If the structure and class name are not used correctly, it will directly affect whether the component can be used normally
1. Use a container named "dropdown" to wrap the entire Drop-down menu element
<div class="dropdown"></div>
2. Use a
<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
3. The drop-down menu item uses a ul list and defines a class name "dropdown-menu"
<ul class="dropdown-menu" role="menu">
ActionAnother actionSomething else here
4. By setting the .dropup
class for the parent element of the drop-down menu, you can make the menu pop up (default It pops up downward)
<div class="dropup"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropup<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> </ul></div>
The drop-down menu component in the Bootstrap framework, The drop-down menu items are hidden by default because the "dropdown-menu" default style is set to "display:none"; when the user clicks the parent menu item, the drop-down menu will be displayed; when the user clicks again, the drop-down menu will Continue to hide
.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); }
Now let’s analyze the implementation principle. It is very simple. Through js technical means, add or remove the class name “open” to the parent container “div.dropdown” to control Show or hide the drop-down menu. That is to say, by default, "div.dropdown" does not have the class name "open". When the user clicks for the first time, "div.dropdown" will add the class name "open"; when the user clicks again, "div.dropdown" "The class name "open" in the container will be removed again
.open > .dropdown-menu { display: block; }
[Separator line]
The drop-down menu in the Bootstrap framework provides a drop-down separator. Assuming that the drop-down menu has two groups, you can add an empty
.dropdown-menu .divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; }
<li role="separator" class="divider"></li>
[Menu title]
You can add a title to any drop-down menu to indicate a group of actions
<li class="dropdown-header">Dropdown header</li>
.dropdown-header { display: block; padding: 3px 20px; font-size: 12px; line-height: 1.42857143; color: #999; }
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">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"><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>
[Alignment]
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 dropdown-menu on "dropdown-menu" "dropdown-menu-right" class name
.dropdown-menu-right { right: 0; left: auto; }
Since
display: inline-block; margin-left: 60px;
<div class="dropdown" style="display: inline-block;margin-left: 60px;"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Dropdown<span class="caret"></span> </button> <ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dropdownMenu1"><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><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>
【Menu item status】
The default states of drop-down menu items are 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; }
In addition to the above two states, the drop-down menu items also have the current state (.active) and the disabled state (.disabled). To use these two states, you only need to add the corresponding class name
<div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">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"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li><li role="presentation" class="divider"></li><li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">下拉菜单项</a></li> </ul></div>
The above is the detailed content of Example tutorial of Bootstrap drop-down menu. For more information, please follow other related articles on the PHP Chinese website!