Latest web development tutorials

Bootstrap button drop-down menu

This chapter explains how to use the Bootstrap class to add the drop-down menu button. To add to the drop-down menu button, simply placed buttons and drop-down menus in a.btn-group can be in.You can also use the <span class = "caret"> </ span> button to indicate a drop down menu.

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

Examples

<Div class = "btn-group"> <Button type = "button" class = "btn btn-default dropdown -toggle" data-toggle = "dropdown"> Default <span class = "caret"> </ span> </ Button> <Ul class = "dropdown-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ 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"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ a> </ Li> </ Ul> </ Div>

try it"

The results are as follows:

Basic Button drop-down menu

Split button drop-down menu

Split buttons and drop-down menus using the drop-down button roughly the same style, but the drop-down menu to add to the original function. Split button is left of the original features, the right is the drop-down menu to switch the display.

Examples

<Div class = "btn-group"> <Button type = "button" class = "btn btn-default" > default </ button> <Button type = "button" class = "btn btn-default dropdown -toggle" data-toggle = "dropdown"> <Span class = "caret"> </ span> <Span class = "sr-only"> switch drop-down menu </ span> </ Button> <Ul class = "dropdown-menu" role = "menu"> <Li> <a href = "#"> function </ a> </ li> <Li> <a href = "#"> Another feature </ a> </ li> <Li> <a href = "#"> Other </ a> </ li> <Li class = "divider"> </ li> <Li> <a href = "#"> isolated link </ a> </ li> </ Ul> </ Div> <Div class = "btn-group"> <Button type = "button" class = "btn btn-primary" > original </ button> <Button type = "button" class = "btn btn-primary dropdown -toggle" data-toggle = "dropdown"> <Span class = "caret"> </ span> <Span class = "sr-only"> switch drop-down menu </ span> </ Button> <Ul class = "dropdown-menu" role = "menu"> <Li> <a href = "#"> function </ a> </ li> <Li> <a href = "#"> Another feature </ a> </ li> <Li> <a href = "#"> Other </ a> </ li> <Li class = "divider"> </ li> <Li> <a href = "#"> isolated link </ a> </ li> </ Ul> </ Div>

try it"

The results are as follows:

Split button drop-down menu

Size pull-down menu button

You can use the drop-down menu with a variety of buttonsize: .btn-large, .btn-sm or .btn-xs.

Examples

<Div class = "btn-group"> <Button type = "button" class = "btn btn-default dropdown -toggle btn-lg" data-toggle = "dropdown"> Default <span class = "caret"> </ span> </ Button> <Ul class = "dropdown-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ 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"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ 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"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ a> </ Li> </ Ul> </ Div>

try it"

The results are as follows:

Size pull-down menu button

Down menu button

Menu can also be drawn up, simply add.dropup .btn-groupto the parent container.

Examples

<Div class = "row" style = "margin-left: 50px ; margin-top: 200px"> <Div class = "btn-group dropup" > <Button type = "button" class = "btn btn-default dropdown -toggle" data-toggle = "dropdown"> Default <span class = "caret"> </ span> </ Button> <Ul class = "dropdown-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ a> </ Li> </ Ul> </ Div> <Div class = "btn-group dropup" > <Button type = "button" class = "btn btn-primary dropdown -toggle" data-toggle = "dropdown"> original <span class = "caret"> </ span> </ Button> <Ul class = "dropdown-menu" role = "menu"> <Li> <A href = "#"> function </ a> </ Li> <Li> <A href = "#"> Another feature </ a> </ Li> <Li> <A href = "#"> Other </ a> </ Li> <Li class = "divider"> </ li> <Li> <A href = "#"> isolated link </ a> </ Li> </ Ul> </ Div> </ Div>

try it"

The results are as follows:

Down menu button