Beginner--bootstrap (vi) drop-down menu in component----on the road (10)

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)