CakePHP と Bootstrap3 のお話
ボタン編
Bootstrap はバージョンが3になってから、リンクの見た目をボタンにするのに、a タグに btn クラスを付けるだけではなく、role 属性に button を指定するように変わった。
HtmlHelper#link を使うときは option で指定する。
追記(20150408):roleいらない!!
<?php echo $this->Html->link( 'Add Post', array('controller' => 'posts', 'action' => 'add'), array('class' => 'btn btn-primary', 'role' => 'button') ); ?>
出力結果:
アイコンを付けたい場合は、link で入れ子にする。
ちなみに、バージョン2では i タグ だったのが span タグの class 属性 にglyphicon を記述するように変わった。
<?php echo $this->Html->link( $this->Html->tag('span', ' Add Post', array('class' => 'glyphicon glyphicon-pencil') ), array('controller' => 'posts', 'action' => 'add'), array('escape' => false, 'class' => 'btn btn-primary', 'role' => 'button') ); ?>
出力結果:
option に 'escape' => false を指定しないと、エスケープされてタグが文字列として出力されてしまうので注意。
で、アイコンは表示できたものの、どうにもフォントがおかしい。全体の font-family は inherit なのに、ここだけ Glyphicons Halflings になっている・・・。
要素を確認してみたところ、glyphicon class にスタイルがあてられているため(アイコン表示に必要)なので、文言を span タグに含めなければOK!
<?php echo $this->Html->link( $this->Html->tag('span', '', array('class' => 'glyphicon glyphicon-pencil') ) . ' Add Post', array('controller' => 'posts', 'action' => 'add'), array('escape' => false, 'class' => 'btn btn-primary', 'role' => 'button') ); ?>
出力結果:
いちいち link でオプション指定してごにょごにょするのは面倒なので、Helper 作って定義しておくといいかもしれない。
オプション 'icon' => 'pencil' とかで、icon が渡されたら span タグが入れ子になってる a タグ(role="button")を生成するとか。