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