Щелкать ботстрапом боком

Я использую Twitter Bootstrap и некоторые пользовательские css (найденные здесь), чтобы выпадающие меню открывались при наведении курсора мыши.

Я использую "каретку" на элементах корневого меню, чтобы показать пользователю, что есть больше доступных опций, я хотел бы использовать боковую версию этого для подменю, в этом примере они используют: → однако я не думаю, что он действительно подходит для остальной части пользовательского интерфейса.

Я тоже пробовал значок игры, но это не совсем соответствует.

Ответы

Ответ 1

Просто переключите границы (см. скрипку):

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

Ответ 2

Используйте бутстрап (3.0) Glyphicons

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

Ответ 3

Как пользователь2661940 сказал, что вы можете использовать глификоны для Bootstrap 3, или вы также можете создать свой собственный класс для каждой стороны. Например

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

Ответ 4

Я делаю это, добавляя класс, который просто изменяет стили границ, чтобы указать каретку вправо. Таким образом, вы можете переключить каретку вправо/вниз, добавив/удалив модифицирующий класс.

HTML:

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

CSS

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

Ответ 5

Я использую эти стили для этого (он работает без бутстрапа)

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

Ответ 6

вы можете использовать простой код:

HTML

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

CSS

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

Ответ 7

Я добавил класс вращения в span

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

Вы можете, очевидно, создать другие классы углов.

Ответ 8

Еще один вариант для любого пользователя, использующего шрифт:

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

Ответ 9

Просто добавьте css, чтобы повернуть курсор мыши на мыши.

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