In the Bootstrap documentation, there seems to be two different ways to create a dropdown:
.dropdown
.btn-group
The first is as follows:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
...
</ul>
</div>
The second is as follows:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Is one way preferred over the other?
A dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
Should I use "drop-down menu" or "dropdown menu" in writing? When writing documentation or describing a drop-down menu, use "drop-down menu" unless you're describing a function, option, or command with no hyphen.
No, it's not possible to have two dropdown menus inside the same div . They need to be separated since the code to toggle them looks for the first element in the parent div of the button/anchor. So if they are in the same parent div only the first will be toggled.
They are basically the same, the use of btn group is to ensure that you can get the buttons on a single line with either another button or another form element.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With