HTML
Donne-moi une flèche ▼
, mais je veux avoir un caret qui ressemble à ▲
.
Y at-il une classe pour cela disponible dans Bootstrap? Sinon, comment y parvenir?
Il existe une classe bootstrap intégrée que vous pouvez attacher à l’élément parent de la classe caret
Cela fonctionne dans les deux bootstrap 2 et 3
Supposons que vous vouliez inverser le caret en utilisant la classe caret-reversed
, de manière à conserver l’implémentation existante de la classe caret
.
Le CSS serait le suivant.
.caret.caret-reversed { border-top-width: 0; border-bottom: 4px solid #000000; }
Cela fonctionne à la fois pour bootstrap 2 et 3.
Mise à jour : Depuis Bootstrap 3.3.2, les .glyphicon-sortingangle-top
et .glyphicon-sortingangle-bottom
sont disponibles et peuvent servir d’alternative à .caret
et à sa version inversée.
Ordinaire
Renversé
Cela a fonctionné pour moi:
transform: rotate(180deg);
Vous pouvez append append une nouvelle classe CSS pour la flèche haut
Démo http://jsfiddle.net/tbgXj/3/
Vous pouvez faire quelque chose comme ça:
en HTML:
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 l’original de bootstrap donc j’obtiens celui dont j’avais besoin.
Donc, pour tous ceux qui utilisent un 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; }