twitter-bootstrap - 拆分按钮下拉菜单设置操作 url

Question

我正在尝试Split button dropdowns在我的网络应用程序中实现，但找不到在主Action按钮上设置 Url 的方法：

<button class="btn">Action</button>

怎么做？

http://twitter.github.com/bootstrap/components.html#buttonDropdowns

Answer 1

按钮不被认为是具有纯 html 动作的独立元素。

但是您可以将链接样式设置为按钮：

<div class="btn-group">
    <a href="#" class="btn">Action</a>

    <button class="btn dropdown-toggle" data-toggle="dropdown">
      <span class="caret"></span>
    </button>

  <ul class="dropdown-menu">
    <li>Test</li>
    <li>Test 2</li>
  </ul>

</div>

或者，您将 JavaScript 侦听器添加到按钮。

Answer 2

我编写了一个独立的 jQuery 插件，它创建了一个易于设置样式的下拉按钮（带有主要和次要链接）。用法如下：

标记

<div class="split-btn">
  <a href="#">Primary Link</a>
  <a href="#">Secondary Link</a>
  <a href="#">Secondary Link</a>
  <a href="#">Secondary Link</a>
</div>

初始化

$(document).ready(function(){
  $('.split-btn').splitdropbutton({
    toggleDivContent: '<i class="icon-reorder"></i>' // optional html content for the clickable toggle div
  })
});

有关更多详细信息和现场演示，请查看github 存储库。

Answer 3

如果有人需要代码Bootstrap 4 Alpha 5

<div class="btn-group">
    <a class="btn btn-primary" href="#">Action</a>

    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="sr-only">Toggle Dropdown</span>
    </button>

    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Test 1</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Test 2</a>
    </div>
</div>