css - 如何为 twitter bootstrap 创建带箭头的自定义按钮？

Question

从语义上讲，我要显示的信息是管道的一系列用户可选阶段。

例子:

[Stage1 (4 items) |> Stage2 (10 items) |> Stage3 (4 items)]

我正在使用 bootstrap 3 和 jQuery。

这是我试图在按钮右侧放置一个三 Angular 形的 css。

.btn:not(:last-child)::after {
  z-index:2;
  position: relative;
  left: 19px;
  display: inline-block;
  /* Triange like this > */
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid grey;
  content: '';
}

http://codepen.io/smartnut007/pen/LpLVje

codepen 既有我想要的结果的样本，也有我非常不成功的尝试。我想出了如何使用 CSS 显示箭头。但是，我坚持了其余部分。

几个 nube 问题，如果你愿意的话:-)

A) 箭头作用于一个简单的按钮。但是，一旦我在按钮中放入更丰富的 html，箭头的位置就会关闭。什么是更明智的定位方式？

B) 作为下一步，我希望突出显示事件阶段(.btn-primary 或类似的东西以将其标记为事件状态)。如何使箭头和选定的部分/按钮突出显示为相同的颜色？

C) 按钮和按钮组是解决问题的正确方法吗？我也对其他人开放，例如 horizontal list group等等，如果它会更容易。

无论采用何种技术，我都希望它至少适用于 IE9+ 和其他主流浏览器。

Update:

我能够在这里实现大部分我想要的 http://jsfiddle.net/rqu7vrnh/2/

Answer 1

I sort of figured how to make the arrow display using CSS. But, am stuck with the rest of it.

您走在正确的轨道上。您只需要进行一些修复。

A) The arrow works on a simple button. But, the positioning of the arrow is off once I put richer html in the button. What is a smarter way to position this?

您的按钮应该是positioned relative 并且箭头是absolute。这将帮助您将箭头精确定位到您想要的位置。

B) As a next step, I want the active stage to be highlighted (.btn-primary or some such thing to mark it active). How can I make both the arrow and the selected section/button highlight to the same color?

在按钮上使用 :hover 更改 border-left 颜色。此外，在按钮的 .active 上，因为 Bootstrap 突出显示事件按钮的方法是添加 active 类。您也可以在使用时为 :active 和 :focus 执行此操作。

示例 fiddle :http://jsfiddle.net/abhitalks/onxrj3wt/1/

示例片段:

.btn { position: relative; }
.btn:not(:last-child)::after {
    content: ''; z-index: 100;
    height: 0px; width: 0px;
    position: absolute;
    right: -8px; top: 50%;
    transform: translateY(-50%);
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #ddd;
}
.btn:hover { background-color: #ccc; }
.btn:active { background-color: #7ac7d2 !important; }
.btn:focus { background-color: #7ac7d2 !important; }
.btn:not(:last-child):hover::after {
    border-left: 6px solid #ccc;
}
.btn:not(:last-child):active::after, 
.btn:not(:last-child):focus::after 
{
    border-left: 6px solid #7ac7d2;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" style="margin-top:20px; margin-left:40px;">
  Attempt 1
  <div class="row">
    <div class="btn-group" role="group">
      <a href="#" class="btn btn-default" role="button">
        <h3 class="text-center">767</h3>
        <p class="text-muted text-center">Stage1</p>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <h3 class="text-center">17</h3>
        <p class="text-muted text-center">Stage2</p>
      </a>
      <a href="#" class="btn btn-default" role="button">
        <h3 class="text-center">7</h3>
        <p class="text-muted text-center">Stage3</p>
      </a>
    </div>
  </div>
  
  
  <div class="row"> &nbsp; <div>
    
   Desired Output
  <div class="row">
    
    <img src="https://s3.amazonaws.com/warning-public-resources/pipeliene-example.png" height="100"></img>
  </div>
</div>

注意:上面的示例是一个快速演示。不考虑元素的特殊性。在您的生产代码中，您应该仔细查看覆盖 Bootstrap 规则的特殊性，以避免 !important。