Twitter Bootstrap sidet caret

Question

Estoy usando Twitter Bootstrap y algunos CSS personalizados (here) para tener menús desplegables abiertos al pasar el ratón.

Estoy usando el "caret" en los elementos del menú raíz para mostrar al usuario que hay más opciones disponibles, me gustaría usar una versión lateral de esto para los submenús, en ese ejemplo usan un - > imagen, sin embargo, no creo que realmente encaje con el resto de la IU.

También probé el icono de reproducción que tiene twitter pero tampoco coincide.

Answer 1

Sólo tiene que activar las fronteras (see fiddle):

HTML

<b class="caret-right"></b> 

CSS

.caret-right { 
    border-bottom: 4px solid transparent; 
    border-top: 4px solid transparent; 
    border-left: 4px solid; 
    display: inline-block; 
    height: 0; 
    opacity: 0.3; 
    vertical-align: top; 
    width: 0; 
} 

Answer 2

puede utilizar código simple:

HTML

<span class="caret"></span> 

CSS:

.caret{ 
border-color:#ffffff transparent transparent transparent; 
border-width:4px; 
border-style:solid; 
content: "" 
display:inline-block; 
} 

Answer 3

Uso de la rutina de carga (3.0) Glyphicons

<span class="glyphicon glyphicon-chevron-up"></span> <!-- UP --> 
<span class="glyphicon glyphicon-chevron-down"></span> <!-- DOWN--> 

Answer 4

Como user2661940 dijo que se puede utilizar glyphicons de Bootstrap 3 o también se puede hacer tu propia clase para cada lado Por ejemplo

.caret-right { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    margin-left: 2px; 
    vertical-align: middle; 
    border-left: 4px solid; 
    border-bottom: 4px solid transparent; 
    border-top: 4px solid transparent; 
} 

Answer 5

lo hago mediante la adición de una clase que simplemente modifica los estilos de borde a señalar con el cursor hacia la derecha. De esta forma, puede alternar un símbolo de intercalación hacia la derecha/abajo agregando/eliminando la clase modificadora.

HTML:

<span class='caret caret-right'></span> 

CSS:

.caret-right { 
    border-left: 4px solid; 
    border-bottom: 4px solid transparent; 
    border-top: 4px solid transparent; 
} 

Answer 6

utilizo estos estilos de hacer eso (que funciona sin arranque así)

HTML:

<span class="caret up"></span> 
<span class="caret right"></span> 
<span class="caret down"></span> 
<span class="caret left"></span> 

CSS:

.caret { 
    border: 5px solid transparent; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    opacity: 0.5; 
    vertical-align: top; 
} 
.caret.up { 
    border-bottom: 5px solid; 
} 
.caret.right { 
    border-left: 5px solid; 
} 
.caret.down { 
    border-top: 5px solid; 
} 
.caret.left { 
    border-right: 5px solid; 
} 

Answer 7

he añadido una clase de rotación para el lapso

HTML:

<span class="rotate270 caret"></span> 

CSS:

.rotate270 { 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 

Puede, evidentemente, crear otras clases de ángulos como deseado.

Answer 8

Sólo añadir CSS para rotar el cursor sobre el ratón

.navbar-nav>li>.dropdown-menu{ 
    display:block; 
    visibility:hidden; 

} 
.navbar-nav>li:hover>.dropdown-menu{ 
    visibility:visible; 
} 
.navbar-default .navbar-nav>li:hover>a .caret{ 
    transform:rotate(-90deg); 
    transition:all 0.3s ease-in-out; 
} 

Answer 9

Otra opción para cualquier persona que utilice la fuente impresionante:

<i class="fa fa-caret-right" aria-hidden="true"></i>