今回Bootstrapで、コンテンツフローの矢印が必要になり、
ググっていた所、簡単に使えるものがありました。
使い方は、
<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が無くても上記コードを入れれば、問題なく使えます。
とりあえず矢印だけ、使用したいという方でも手軽に使えるのではないでしょうか。
コメント