Bootstrap: 如何像语义一样设计条件按钮组 UI

Question

在我的网页中，我想要一组两个按钮，例如Add More 或 Save All。

我正在使用 Bootstrap 3 来设计页面。现在我知道 Bootstrap 允许这样的按钮组：

但最近我访问了 Semantic UI 并看到了很棒的按钮组，如下图所示：

我可以使用Bootstrap设计类似的按钮组（中间有一个圆圈的条件'OR'）吗？如果是，如何？

Answer 1

这里是游戏，只需要检查元素....

Bootply : http://www.bootply.com/j4xkdrVPWZ

HTML :

<div class="btn-group">
  <button class="btn">Left</button>
  <div class="or"></div>
  <button class="btn">Right</button>
</div>

CSS:

.or {
  position: relative;
  float: left;
  width: .3em;
  height: 2.57142em;
  z-index: 3;
}

.or:before {
  position: absolute;
  text-align: center;
  border-radius: 500rem;
  content: 'or';
  top: 50%;
  left: 50%;
  background-color: #fff;
  text-shadow: none;
  margin-top: -.892855em;
  margin-left: -.892855em;
  width: 1.78571em;
  height: 1.78571em;
  line-height: 1.78571em;
  color: rgba(0,0,0,.4);
  font-style: normal;
  font-weight: 700;
  box-shadow: 0 0 0 1px transparent inset;
}

Bootstrap: 如何像语义一样设计条件按钮组 UI

Bootstrap: How to design Conditional Button Group like Semantic UI

twitter-bootstrap

css

twitter-bootstrap-3

semantic-ui