Bootstrap:如何设计像语义UI

时间:2015-05-18 06:04:08

标签: css twitter-bootstrap css3 twitter-bootstrap-3 semantic-ui

在我的网页中,我想要一组两个按钮,例如Add MoreSave All

我正在使用Bootstrap 3来设计页面。现在我知道Bootstrap允许按钮组看起来像这样:

Bootstrap Button Groups

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

Semantic Button Group

我可以使用Bootstrap设计类似的按钮组(在中间的圆圈中使用条件“OR”)吗?如果是,怎么做?

1 个答案:

答案 0 :(得分:2)

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

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;
}