Component--- drop-down menu
a switchable, contextual menu that displays a list of links. The JavaScript plugin for the drop-down menu makes it interactive.
Both the drop-down menu trigger and the drop-down menu are wrapped in .dropdown
, or another declared position: relative;
element. Then add the HTML code that makes up the menu. The code and effect are as follows:
<Divclass= "Dropdown"> <Buttonclass= "btn btn-default dropdown-toggle"type= "button"ID= "DropdownMenu1"Data-toggle= "Dropdown">Dropdown<spanclass= "Caret"></span> </Button> <ulclass= "Dropdown-menu"role= "Menu"Aria-labelledby= "DropdownMenu1"> <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Action</a></Li> <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Another action</a></Li> <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Something Else here</a></Li> <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Separated link</a></Li> </ul></Div>
1, about the alignment settings:
By default, the drop-down menu is automatically positioned as 100% width along the top and left sides of the parent element. To .dropdown-menu
add a .dropdown-menu-right
class, you can make the menu right-aligned.
<class= "Dropdown-menu dropdown-menu-right" role= "Menu" Aria-labelledby= "Dlabel"> Right-aligned </ul>
2, about the title setting:
<ulclass= "Dropdown-menu"role= "Menu"Aria-labelledby= "DROPDOWNMENU2">Drop down<binrole= "Presentation"class= "Dropdown-header">Dropdown Header</Li>title</ul>
3. Split Line:
Add a split line to the drop-down menu to group multiple links.
<ulclass= "Dropdown-menu"role= "Menu"Aria-labelledby= "Dropdownmenudivider"> ... <Lirole= "Presentation"class= "Divider"></Li> ...</ul>
4. Disabled menu items:
Adds a class for the elements in the drop-down menu <li>
.disabled
, thereby disabling the corresponding menu item.
<ulclass= "Dropdown-menu"role= "Menu"Aria-labelledby= "DropdownMenu3"> <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Regular Link</a></Li> <Lirole= "Presentation"class= "Disabled"><arole= "MenuItem"TabIndex= "-1"href="#">Disabled Link</a></Li> <Lirole= "Presentation"><arole= "MenuItem"TabIndex= "-1"href="#">Another link</a></Li></ul>
Beginner--bootstrap (vi) drop-down menu in component----on the road (10)