web-dev-qa-db-ja.com

Twitter Bootstrap sideways caret

Twitter Bootstrap=およびいくつかのカスタムcss（ here ）を使用して、マウスオーバーでドロップダウンメニューを開きます。

ルートメニュー項目の「キャレット」を使用して、利用可能なオプションがあることをユーザーに示しています。サブメニューにはこのバージョンの横向きのバージョンを使用したいと思います。 UIの他の部分と実際に適合するとは思わないでください。

Twitterのプレイアイコンも試してみましたが、どちらも完全には一致しません。

csstwitter-bootstrap
33
Daniel Powell

境界線を切り替えるだけです（ フィドルを参照 ）：

[〜＃〜] 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;
}
71
ScottS

キャレットが右を指すように境界線スタイルを単に変更するクラスを追加することでそれを行います。そのようにして、変更クラスを追加/削除することにより、キャレットを右/下に切り替えることができます。

HTML：

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

CSS：

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

bootstrap（3.0）グリフィコンを使用

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

User2661940が言ったように、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;
}
5
2low4

回転クラスをスパンに追加しました

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

もちろん、必要に応じて他の角度クラスを作成できます。

4
DesJ

素晴らしいフォントを使用している人のための別のオプション：

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

私はこれらのスタイルを使用してそれを行います（bootstrapもなしで動作します）

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

簡単なコードを使用できます：

[〜＃〜] html [〜＃〜]

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

CSS：

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

マウスホバーでキャレットを回転させるために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;
}
0
Tariq Javed