The best Bootstrap button drop-down menu Tutorial In 2024, In this tutorial you can learn
Examples,Split button drop-down menu,Examples,Size pull-down menu button,Examples,Down menu button,Examples,
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>
The results are as follows:
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>
The results are as follows:
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>
The results are as follows:
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>
The results are as follows: