首页 > 技术文章 > bootstrap small test

Ed-song 2017-12-05 20:25 原文

    (来源:github)

(效果)

 

 

<div class="btn-group btn-group-sm">
       <button class="btn btn-default active">
           <span class="glyphicon glyphicon-eye-open" style="margin-right: 3px"></span> <span style="font-weight:700">Watch</span>
           <span class="caret"></span>
       </button>
       <button class="btn btn-default">3,064</button>
</div>

ps:
 <span class="caret"></span> 向下的箭头

 

 ,  这个朝下的箭头有两种方法,bootstrap方法如上,css办法如下:

.watch-tail::after {
            content: "";
            width: 0;
            height: 0;
            vertical-align: -2px;
            display: inline-block;
            border: 4px solid; 
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
}
直接在watch-tail类后面添加一个伪类元素

 

推荐阅读