Bootstrapに、矢印を追加する

構築・開発

今回Bootstrapで、コンテンツフローの矢印が必要になり、
ググっていた所、簡単に使えるものがありました。

Bootstrap Arrows.
デモページ

使い方は、
<head>内に script と css を追加。

<link rel="stylesheet" href="css/bootstrap-arrows.css" data-angle="stylesheet">
<script src="js/bootstrap-arrows.min.js"></script>

 

矢印を挿入したい要素に class=’arrow’ を付与する。

<div class='arrow'></div>

色も7色あります。こちらもクラス名を変更するだけで変わってしまいます。
arrow-primary
arrow-info
arrow-success
arrow-inverse
arrow-danger
arrow-warning

長めの矢印にしたい場合は、クラスの後ろに -large を追加する。

<div class='arrow-large'></div>

 

矢印を回転させるには、下記コードを追加し、

<script>
$(function () {
    $('.arrow, [class^=arrow-]').bootstrapArrows();
});
</script>

クラスが付いた要素に data-angle=’xx’ を追加する。
下向きだと data-angle=’180′ となる。

<div class='arrow-primary-large' data-angle='180'></div>

今回Bootstrapで調べていましたが、
上記は、Bootstrapが無くても上記コードを入れれば、問題なく使えます。

とりあえず矢印だけ、使用したいという方でも手軽に使えるのではないでしょうか。

コメント

スポンサーリンク
タイトルとURLをコピーしました