Twitter Bootstrap sideway caret

Question

Używam Twitter Bootstrap i niektórych niestandardowych css (znaleziono here), aby menu rozwijane otworzyły się po najechaniu myszą.

Używam "karetki" na elementach menu głównego, aby pokazać użytkownikowi, że jest więcej dostępnych opcji, chciałbym użyć bocznej wersji tego dla podmenu, w tym przykładzie używają one - > obraz jednak nie wydaje mi się, żeby pasował do reszty interfejsu użytkownika.

Próbowałem również ikony play twitter ma, ale nie całkiem pasuje albo.

Answer 1

Wystarczy przełączyć się granice (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

można użyć prostego kodu:

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

pomocą bootstrap (3.0) Glyphicons

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

Answer 4

Jak user2661940 powiedział można użyć glyphicons dla Bootstrap 3 lub można również dokonać twoja własna klasa dla każdej strony. Na przykład

.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

to zrobić dodając klasę, która po prostu modyfikuje style granicznych wskazać karetkę w prawo. W ten sposób możesz przełączać karetkę w prawo/dół, dodając/usuwając klasę modyfikującą.

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

mogę używać tych stylów, aby to zrobić (działa bez bootstrap jak dobrze)

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

dodałem klasę rotacji do rozpiętości

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); 
} 

Można oczywiście tworzyć inne klasy kąt jako pożądany.

Answer 8

Wystarczy dodać css do obracania daszek na myszy najechaniu

.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

Inną opcją dla każdego, czcionką niesamowite:

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