Bootstrap dropdown menu
This chapter will focus on Bootstrap dropdown menu. Drop-down menu is switched, the link is displayed in list format context menu. This can be done with the pull-down menu (Dropdown) JavaScript plug-ins to interact to achieve.
To use the following menu, you only need to add the drop-down menu in theclass .dropdown.The following example illustrates the basic drop-down menu:
Examples
<Div class = "dropdown">
<Button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"> theme <span class = "caret"> </ span>
</ Button>
<Ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Java < / a>
</ Li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Data Mining </ a>
</ Li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Data Communication / Network </ a>
</ Li>
<Li role = "presentation" class = "divider"> </ li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> isolated link </ a>
</ Li>
</ Ul>
</ Div>
try it"
The results are as follows:
Options
Align
By addingclass .pull-right to .dropdown-menuto align the drop-down menu to the right. The following example illustrates this point:
Examples
<Div class = "dropdown">
<Button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"> theme <span class = "caret"> </ span>
</ Button>
<Ul class = "dropdown-menu pull- right" role = "menu" aria-labelledby = "dropdownMenu1">
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Java < / a>
</ Li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Data Mining </ a>
</ Li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Data Communication / Network </ a>
</ Li>
<Li role = "presentation" class = "divider"> </ li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> isolated link </ a>
</ Li>
</ Ul>
</ Div>
try it"
The results are as follows:
title
You can use theclass dropdown-header to add the title to the label area drop down menu.The following example illustrates this point:
Examples
<Div class = "dropdown">
<Button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"> theme <span class = "caret"> </ span>
</ Button>
<Ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1">
<Li role = "presentation" class = "dropdown-header"> drop-down menu title </ li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Java < / a>
</ Li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Data Mining </ a>
</ Li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> Data Communication / Network </ a>
</ Li>
<Li role = "presentation" class = "divider"> </ li>
<Li role = "presentation" class = "dropdown-header"> drop-down menu title </ li>
<Li role = "presentation">
<A role = "menuitem" tabindex = "-1" href = "#"> isolated link </ a>
</ Li>
</ Ul>
</ Div>
try it"
The results are as follows:
More examples
| class | description | Examples |
|---|---|---|
| .dropdown | Specifies the pull-down menus, drop-down menus are wrapped in .dropdown Lane | try it |
| .dropdown-menu | Create a drop-down menu | try it |
| .dropdown-menu-right | Drop-down menu right justified | try it |
| .dropdown-header | Drop-down menu to add a title | try it |
| .dropup | Pop-up drop-down menu to specify | try it |
| .disabled | Drop-down menu item is disabled | try it |
| .divider | The dividing line in the drop-down menu | try it |