BootStrap下拉菜单
.dropdown 菜单用于指定下拉菜单，下拉菜单都包裹在 .dropdown 里。
.dropdown-menu 类用于实际下拉菜单的创建。
其中caret是用来显示那个小三角的，要不然谁知道这个玩意竟然是个下拉菜单。当然没这个也行。
data-toggle="dropdown"这个必不可少，意思是这个button是下拉菜单触发器。
bootstrapcdn 中 data-toggle="dropdown" 属性是用来做什么的？ - stma - 博客园
<div class="dropdown">
<button class="btn btn-default " type="button" id="menu1" data-toggle="dropdown">教程
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" >
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">关于我们</a></li>
</ul>
</div>
结果如下
image.png
UIkit下拉菜单
如果要用button触发下拉菜单的话，就必须是
A button can be used to trigger a dropdown menu from the
Dropdown component. Just add the .uk-button-dropdown class and the data-uk-dropdown attribute to a <div> element that contains the button and the dropdown itself.
<!-- This is the container enabling the JavaScript -->
<div class="uk-button-dropdown" data-uk-dropdown>
<!-- This is the button toggling the dropdown -->
<button class="uk-button">Hover</button>
<!-- This is the dropdown -->
<ul class="uk-dropdown">
<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
</ul>
</div>
</div>
结果
image.png
不同
bs的data-toggle属性是写在button的(也就是激活下拉菜单的元素上）而uikit的 data-uk-dropdown则是写在最外层的。
dropdown-menu对应uk-dropdown
data-toggle对应data-uk-dropdown
ps
个人还是觉得BootStrap的写法更舒服一些！
下拉菜单 - UIkit 中文文档
Button component - UIkit documentation
