Question

分割按钮按钮部分的用途是什么？

我使用的是最新版本的Bootstrap 3.我有一个细节分割按钮，当你点击箭头时会显示几个选项。单击时，用户将转到该页面。如果我点击按钮部分而不是箭头那么应该发生什么？它应该进入默认页面吗？如果是这样，我将如何更改下面的代码才能执行此操作？我是否需要将按钮更改为链接？

<div class="btn-group">
    <button type="button" class="btn btn-default">Details</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu" role="menu">
        <li><a href="#">Client Information</a></li>
        <li><a href="#">Option 2</a></li>
        <li><a href="#">Option 3</a></li>
    </ul>
</div>

Answer 1

是的，您可以使用此拆分按钮/下拉菜单，方便用户访问链接，而无需打开下拉列表。

如果您想将按钮更改为链接，并保持样式，您只需将<button>更改为<a>标记即可。类<a>的{{1}}标记将被设置为按钮样式。

btn btn-default

Bootply Demo

Answer 2

按钮部分的目的是为用户提供对默认选项的快速访问。听起来像你正在寻找的是常规下拉，而不是拆分按钮。单击常规下拉按钮（任何位置）将打开要单击的下拉选项列表。下面是一个改编自Bootstrap文档的片段。 Link to plunker

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

分割按钮的按钮部分的用途

2 个答案:

Bootply Demo