のえら

技術備忘とかメモとか.間違いはつっこんでいただきたい所存.

CakePHP学習記録 そのご Bootstrap3 とボタンリンクの話

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')
); ?>

出力結果:
f:id:noterr0001:20140502180152p:plain

アイコンを付けたい場合は、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')
); ?>

出力結果:
f:id:noterr0001:20140502180153p:plain

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')
); ?>

出力結果:
f:id:noterr0001:20140502180154p:plain

いちいち link でオプション指定してごにょごにょするのは面倒なので、Helper 作って定義しておくといいかもしれない。
オプション 'icon' => 'pencil' とかで、icon が渡されたら span タグが入れ子になってる a タグ(role="button")を生成するとか。