HTML
<span class="caret"></span>
给了我一个插入符号箭头 ▼ ,但我希望有一个看起来像 ▲ 的插入符号 .
▼
▲
Bootstrap中是否有可用的课程?如果没有,如何实现这一目标?
有一个内置的引导类,您可以将其附加到插入符类的父元素
<span class="dropup"> <span class="caret"></span> </span>
它适用于bootstrap 2和3
假设您要使用类 caret-reversed 反转插入符,以便保留 caret 类的现有实现 .
caret-reversed
caret
CSS将如下 .
<span class="caret caret-reversed"></span> .caret.caret-reversed { border-top-width: 0; border-bottom: 4px solid #000000; }
它适用于bootstrap 2和3 .
Update :自Bootstrap 3.3.2起, .glyphicon-triangle-top 和 .glyphicon-triangle-bottom 字形可用作 .caret 及其反转版本的替代品 .
.glyphicon-triangle-top
.glyphicon-triangle-bottom
.caret
Normal
<span class="glyphicon glyphicon-triangle-bottom"></span>
Reversed
<span class="glyphicon glyphicon-triangle-top"></span>
这对我有用:
transform: rotate(180deg);
您可以为向上箭头添加新的css类
<style> .caret-up{ border-bottom: 10px solid #000000; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); content: ""; display: inline-block; height: 0; vertical-align: top; width: 0; }
<span class="caret-up"></span>
演示http://jsfiddle.net/tbgXj/3/
你可以这样做:
在HTML中:
<span class="caret caret-reversed"></span>
在CSS中:
.caret-reversed{ -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); }
刚出现这个问题,对我来说最好的解决方案是编辑bootstrap原创的样式,这样我得到了我需要的那个 .
所以对于每个使用bootstrap的人来说,这是相反的:
.caret-up { display: inline-block; width: 0; height: 0; margin-left: 2px; vertical-align: middle; border-bottom: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent; }
6 回答
有一个内置的引导类,您可以将其附加到插入符类的父元素
它适用于bootstrap 2和3
假设您要使用类
caret-reversed
反转插入符,以便保留caret
类的现有实现 .CSS将如下 .
它适用于bootstrap 2和3 .
Update :自Bootstrap 3.3.2起,
.glyphicon-triangle-top
和.glyphicon-triangle-bottom
字形可用作.caret
及其反转版本的替代品 .Normal
Reversed
这对我有用:
您可以为向上箭头添加新的css类
演示http://jsfiddle.net/tbgXj/3/
你可以这样做:
在HTML中:
在CSS中:
刚出现这个问题,对我来说最好的解决方案是编辑bootstrap原创的样式,这样我得到了我需要的那个 .
所以对于每个使用bootstrap的人来说,这是相反的: