パネル
関連するコンテンツを枠で囲みたいときは、パネルを使います。Bootstrapでは、さらに情報を分かりやすくするために、パネルにヘッダやフッタをつけることもできます。
基本のパネル
パネルを作成するには、div要素のclass属性に"panel"を指定します。パネルの中に配置するコンテンツはdiv要素のclass属性に”panel-body”を指定します。細い枠に囲まれたコンテンツが表示されます。
<div class="panel panel-default"> <div class="panel-body"> 入荷商品 </div> </div>
ヘッダ/フッタ付きのパネル
パネルにヘッダをつけるには、div要素のclass属性に"panel-heading"を指定します。ヘッダにタイトルをつけるときは、タイトルの文字の要素のclass属性に"panel-title"を指定します。フッタをつけるには、div要素のclass属性に"panel-footer"を指定します。
<!-- タイトルなしヘッダ --> <div class="panel panel-default"> <div class="panel-heading">商品1</div> <div class="panel-body"> 商品1の説明 </div> </div> <!-- タイトルありヘッダ --> <div class="panel panel-default"> <div class="panel-heading"> <h1 class="panel-title">商品2</h1> <h6 class="panel-title">サブタイトル</h6> </div> <div class="panel-body"> 商品2の説明 </div> </div> <!-- フッタ --> <div class="panel panel-default"> <div class="panel-body"> 商品3の説明 </div> <div class="panel-footer">商品3</div> </div>
パネルのスタイル
情報の内容によって、パネルのスタイルを変えることができます。パネルのスタイルを変えるには、class属性に以下の属性を指定します。
用途 | class属性の指定 | 色 |
---|---|---|
デフォルト | panel-default | 白 |
成功 | panel-success | 緑 |
情報 | panel-info | 水色 |
注意 | panel-warning | オレンジ |
警告 | panel-danger | 赤 |
<div class="panel panel-default">~中略~</div> <div class="panel panel-success">~中略~</div> <div class="panel panel-info">~中略~</div> <div class="panel panel-warning">~中略~</div> <div class="panel panel-danger">~中略~</div>
テーブル/リスト付きのパネル
パネルの中にテーブルを配置するには、"panel-body"を指定したdiv要素の中にtable要素を配置します。
<div class="panel panel-default"> <div class="panel-heading">入荷書籍一覧</div> <div class="panel-body"> ~中略~ <table class="table"> ~中略~ </table> </div> </div>
パネルの中にはリストグループを配置することもできます。テーブルと同様に"panel-body"を指定したdiv要素の中に、class属性に"list-group"を指定したul要素を配置します。
<div class="panel panel-default"> <div class="panel-heading">入荷書籍一覧</div> <div class="panel-body"> <p>本日入荷した書籍です</p> <ul class="list-group"> <li class="list-group-item">はじめてのC#</li> <li class="list-group-item">クラウド全集</li> </ul> </div> </div>