Bootstrap 3.0.x系で矢印を使って表現したい

Bootstrap Allows

BootStrapを使わないと絶対にできないかというとそんなわけではないけれども、BootstrapのCSSを使って表現するのでBootstrapを使った方が早道ということ


使うのは Bootstrap Allows.

ファイルをダウンロードしたら、CSS,JS,imgを適宜アップロードしてヘッダー内に読み込み記述を追加する

使用するタグの基本は

矢印の色を変えたい場合は『class』を

class=’arrow-default’
default_allow

class=’arrow-primary’
primary_allow

class=’arrow-info’
danger_allow

class=’arrow-success’
success_allow

class=’arrow-warning’
warning_allow

class=’arrow-danger’
danger_allow

class=’arrow-inverse’
inverse_allow

に変える


向きを変えたい時は『class』に

data-angle=’xxx’ を追加すのと、JavaScriptを使うので下記の記述を追加する
テーマのbody内に記述してもいいが、全てのポストに不要なタグが埋め込まれてしまうことになるので都度入れた方がいいと思う

data-angle=’45’
allow_045

data-angle=’90’
allow_090

data-angle=’135′
allow_135

data-angle=’180′
allow_180

data-angle=’245′
allow_245

data-angle=’270′
allow_270


矢印の大きさを変えたい時は『class』の[allow]指定として

arrow-success-large

のように後ろに[large]を追加してあげる