L'accent circonflexe à l'envers
HTML
<span class="caret"></span>
Donne-moi un signe flèche ▼, mais je veux avoir un signe qui ressemble à ▲.
Y a-t-il une classe pour cela disponible dans Bootstrap? Si non, comment faire?
6 réponses
Il existe une classe bootstrap intégrée que vous pouvez attacher à l'élément parent de la classe caret
<span class="dropup">
<span class="caret"></span>
</span>
Cela fonctionne à la fois dans bootstrap 2 et 3
Supposons que vous voulez inverser le curseur en utilisant la classe caret-reversed, de sorte que vous conserviez l'implémentation existante de la classe caret.
Le CSS serait le suivant.
<span class="caret caret-reversed"></span>
.caret.caret-reversed {
border-top-width: 0;
border-bottom: 4px solid #000000;
}
Cela fonctionne à la fois pour bootstrap 2 et 3.
Update : Depuis Bootstrap 3.3.2 Les .glyphicon-triangle-top et .glyphicon-triangle-bottom glyphicons sont disponibles qui peuvent fonctionner comme des alternatives à .caret et sa version inversée.
Normal
<span class="glyphicon glyphicon-triangle-bottom"></span>
Inversé
<span class="glyphicon glyphicon-triangle-top"></span>
Vous pouvez ajouter ajouter une nouvelle classe css pour la flèche vers le haut
<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>
Vous pouvez faire quelque chose comme ceci:
En HTML:
<span class="caret caret-reversed"></span>
En CSS:
.caret-reversed{
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
Juste eu ce problème et la meilleure solution pour moi était d'éditer le style pour bootstrap original afin que j'obtienne celui dont j'avais besoin.
Donc, pour tous ceux qui utilisent bootstrap, voici le contraire:
.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;
}