Question

我正在尝试在我的网络应用中实施Split button dropdowns，而我找不到在主Action按钮上设置网址的方法：

<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插件，它创建了一个easily stylable dropdown button（带有主链接和辅助链接）。用法如下：

标记

<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 repo。

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>

拆分按钮下拉菜单设置动作网址

3 个答案: