Bootstrapに、矢印を追加する

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

Bootstrap Arrows.
デモページ

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

 

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

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

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

 

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

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

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください