Original: Bootstrap < basic 12 > drop-down menu (dropdowns)
Bootstrap drop-down menu. The drop-down menu is switchable and is a contextual menu that displays links in list format. This can be achieved by interacting with the drop-down menu (Dropdown) JavaScript plugin.
To use the menu below, simply add a drop-down menu to the class . Dropdown . The following example shows the Basic drop-down menu:
<! DOCTYPE html>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& Gt </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= "p Resentation "> <a role=" MenuItem "tabindex="-1 "href=" # "> Detached links </a> </li> </ul>< ;/div></body>The results are as follows:
Option alignmentAlign the drop-down menu to the right by adding class . pull-right to the . Dropdown-menu . The following example demonstrates this:
<! DOCTYPE html>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= "#" &G T java</a> </li> <li role= "Presentation" > <a role= "MenuItem" tabindex= "-1" href= "#" &G t; 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= "p Resentation "> <a role=" MenuItem "tabindex="-1 "href=" # "> Detached links </a> </li> </ul>< ;/div></body>The results are as follows:
TitleYou can add a caption using the label area of the class Dropdown-header drop-down menu. The following example demonstrates this:
<! DOCTYPE html>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=" Presenta tion "> <a role=" MenuItem "tabindex="-1 "href=" # ">Java</a> </li> <li role=" Prese Ntation "> <a role=" MenuItem "tabindex="-1 "href=" # "> Data Mining </a> </li> <li role=" pre Sentation "> <a role=" MenuItem "tabindex="-1 "href=" # ">Data Communication/Network </a> </li> <li role= "presentation" class= "divider" ></li> <li role= "p Resentation "class=" Dropdown-header "> drop-down menu title </li> <li role=" Presentation "> <a role=" MenuItem "Tabindex="-1 "href=" # "> Detached links </a> </li> </ul></div></body>The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overviewbootstrap< Basic two > network system
bootstrap< Basic three > typesetting
bootstrap< basic Four > code
Bootstrap < Fundamentals five > forms
bootstrap< basic six > form
Bootstrap < basic seven > button
Bootstrap < basics eight > pictures
bootstrap< Basic Nine > Auxiliary class
bootstrap< Basic 10 > responsive Utility
bootstrap< Basic 11 > Font icons (glyphicons)
Bootstrap < Basics 12 > drop-down menu (dropdowns)
bootstrap< Basic 13 > button Group
bootstrap< Basic 14 > button drop-down menu
bootstrap< Basic 15 > Input Frame Group
bootstrap< basic 16 > Navigation elements
bootstrap< basic 17 > Navigation Bar Bootstrap < basic 18 > Breadcrumb navigation (Breadcrumbs) Bootstrap < Fundamentals 19 > Pagination bootstrap< Basics 20 > Tags Bootstrap < fundamentals 21 > badges (Badges) Bootstrap < basic 22 > Oversized screen (Jumbotron) Bootstrap < basic 23 > page title Header) bootstrap< Basic 24 > Thumbnail Bootstrap < basic 25 > Warning (Alerts) Bootstrap < basic 26 > progress barBootstrap < Basics 12 > drop-down menu (dropdowns)