The best Bootstrap dropdown menu Tutorial In 2024, In this tutorial you can learn
Examples,Options,Examples,Examples,More examples,
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>
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>
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>
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 |