bootstrap< Basic 14 > button drop-down menu

Original:bootstrap< Base 14 > Button drop-down menu

Use the Bootstrap class to add a drop-down menu to the button. To add a drop-down menu to a button, simply place the button and drop-down menu in a . Btn-group . You can also use the <span class= "caret" ></span> to indicate a button as a drop-down menu.

The following example shows a basic simple button drop-down menu:

<! DOCTYPE html>Data-toggle= "Dropdown" >default<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &LT;LI&GT;&L T;a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a h ref= "#" > Other </a></li> <li class= "divider" ></li> <li><a href= "#" > Detached links </a ></li> </ul></div><div class= "Btn-group" > <button type= "button" class= "Btn btn-primary Dropdown-toggle "Data-toggle= "Dropdown" >Original<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &LT;LI&GT;&L T;a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a h ref= "#" > Other </a></li> <li class= "divider" ></li> <li><a href= "#" > Detached links </a ></li> </ul></div></body>
The results are as follows:
Split button drop-down menu
The split button drop-down menu uses the same style as the drop-down menu buttons, but adds the original functionality to the drop-down menu. The left side of the split button is the original function, and the right side is the toggle that shows the drop-down menu.
<! DOCTYPE html>Data-toggle= "dropdown" > <span class= "caret" ></span> <span class= "sr-only" > Toggle drop-down menu </span>      </button> <ul class= "Dropdown-menu" role= "menu" > <li><a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a href= "#" > Other </a></li> & Lt;li class= "Divider" ></li> <li><a href= "#" > Detached links </a></li> </ul></div&gt ; <div class= "Btn-group" > <button type= "button" class= "BTN btn-primary" > Raw </button> <button type= "Button" class= "Btn btn-primary dropdown-toggle"Data-toggle= "dropdown" > <span class= "caret" ></span> <span class= "sr-only" > Toggle drop-down menu </span>      </button> <ul class= "Dropdown-menu" role= "menu" > <li><a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a href= "#" > Other </a></li> & Lt;li class= "Divider" ></li> <li><a href= "#" > Detached links </a></li> </ul></div&gt ;</body>
The results are as follows:
Button drop-down menu size
You can use the drop-down menu with buttons of various sizes:. Btn-large,. BTN-SM, or . Btn-xs.
<! DOCTYPE html>Data-toggle= "Dropdown" >default<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &LT;LI&GT;&L T;a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a h ref= "#" > Other </a></li> <li class= "divider" ></li> <li><a href= "#" > Detached links </a ></li> </ul></div><div class= "Btn-group" > <button type= "button" class= "Btn btn-primary Dropdown-toggle BTN-SM "Data-toggle= "Dropdown" >Original<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &LT;LI&GT;&L T;a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a h ref= "#" > Other </a></li> <li class= "divider" ></li> <li><a href= "#" > Detached links </a ></li> </ul></div><div class= "Btn-group" > <button type= "button" class= "Btn btn-success Dropdown-toggle Btn-xs "Data-toggle= "Dropdown" >Success<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &LT;LI&GT;&L T;a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> <li><a h ref= "#" > Other </a></li> <li class= "divider" ></li> <li><a href= "#" > Detached links </a ></li> </ul></div></body>
The results are as follows:
Button Pull-up menu
The menu can also be stretched upward, simply by adding the . Dropup to the parent . Btn-group container.
<! DOCTYPE html>Data-toggle= "Dropdown" >default<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &lt ; Li><a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> &L T;li><a href= "#" > Other </a></li> <li class= "divider" ></li> <li><a HR ef= "#" > Separate links </a></li> </ul> </div> <div class= "Btn-group dropup" > <butto N type= "button" class= "Btn btn-primary dropdown-toggle"Data-toggle= "Dropdown" >Original<span class= "Caret" ></span> </button> <ul class= "Dropdown-menu" role= "menu" > &lt ; Li><a href= "#" > Features </a></li> <li><a href= "#" > Another feature </a></li> &L T;li><a href= "#" > Other </a></li> <li class= "divider" ></li> <li><a HR ef= "#" > Separate links </a></li> </ul> </div></div></body>
The results are as follows:
Series Articles:Bootstrap < Fundamentals > CSS Overview
bootstrap< 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 bar
bootstrap< Basic 14 > button drop-down menu