在我的网页中,我想要一组两个按钮,例如Add More
或Save All
。
我正在使用Bootstrap 3来设计页面。现在我知道Bootstrap允许按钮组看起来像这样:
但最近我访问了Semantic UI并看到了很棒的按钮组,如下图所示:
我可以使用Bootstrap设计类似的按钮组(在中间的圆圈中使用条件“OR”)吗?如果是,怎么做?
答案 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;
}