Bootstrap3のパネルヘッダーの右端にボタンを配置してみた。
UIセンスが皆無な自分はBootstrapを多用します。
管理画面を作るのが好きなのですが、迷わずBootstrapを組み込みます。
最近は他の色々なCSSフレームワークがあるようですが、CSS大嫌いなので自分の中ではどれも大差ありません。
そんなことはさておき。
Bootstrapのパネルとアラートがとても好きです。
もの凄く多用します。
今回はパネルのお話しです。
Bootstrapのパネルの普通の構造
<div class="row"> <div class="col-xs-12"> <div class="panel"> <div class="panel-heading"> パネルの見出し </div> <div class="panel-body"> <div class="row"> <div class="col-xs-12"> パネルの内容 </div> </div> </div> </div> </div> </div>
パネルフッターとかもありますが、自分はあまり使わないので置いておきます。
やりたかったのは「panel-heading」の右側にボタンを配置することです。
「panel-body」の中にdatatables辺りでデータ一覧を表示して、新規作成ボタンを配置したいみたいなよくあるやつです。
こういう時は「panel-heading」部分をちょっと修正すると上手くできます。
こんな風に修正してみる
<div class="row"> <div class="col-xs-12"> <div class="panel"> <div class="panel-heading"> <!-- この辺から修正 --> <span class="panel-title pull-left"> <!-- pull-leftで見出しを左側にセット --> パネルの見出し </span> <span class="pull-right"> <!-- pull-rightでボタンを右側にセット --> <a href="<?php echo $this->Url->build(['controller' => 'users', 'action' => 'edit']); ?>" class="btn btn-block btn-xs btn-primary"> 新規ユーザ作成 </a> </span> <div class="clearfix"></div> <!-- この辺まで修正 --> </div> <div class="panel-body"> <div class="row"> <div class="col-xs-12"> パネルの内容 </div> </div> </div> </div> </div> </div>
レスポンシブにしてもボタンがズレたりしません。
Bootstrapばっかり使う割に解説できないのがアレで申し訳ないです。