またどこかでCTOっぽいことやってる人のブログ

フリーランスを経て、またどこかでCTOっぽいことをやってる人が書いてます。何か色々やってます。

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ばっかり使う割に解説できないのがアレで申し訳ないです。