Bootstrapでパネルを作成する

Bootstrapでパネルを作成することができます。
参考ページ：Panels

設定の基本は、classに”panel panel-default”と”panel-body”を設定することでパネルを作成できます。

<div class="panel panel-default">
    <div class="panel-body">Contents</div>
</div>

パネルのヘッダー設定

パネルのヘッダーを作成するには、classに”panel-heading”を追加します。ヘッダー部分の色は、classに”panel-default”から”panel-primary”などに変更することで色を変えることができます。

<div class="panel panel-primary">
	<div class="panel-heading">Title</div>
	<div class="panel-body">Contents</div>
</div>

また、h要素のclassに”panel-title”と設定することもできます。

<div class="panel panel-primary">
	<div class="panel-heading">
		<h2 class="panel-title">Title</h2>
	</div>
	<div class="panel-body">Contents</div>
</div>

パネルのフッターの設定

classに”panel-footer”を追加することでパネル内にフッターを設定することもできます。

<div class="panel panel-default">
	<div class="panel-body">Contents</div>
	<div class="panel-footer">footer</div>
</div>