Bootstrapのパネルの使い方・設定

Bootstrapのパネル(Panel)とは?

一般的な使い方としては、タイトル部分と内容部分(説明部分)の2箇所にわかれた下記のようなデザインのものです。ページの「補足」や「注意書き」、「用語説明」と様々な用途に使われています!BootstrapのPanel機能についてコードサンプルと表示例を用いて、わかりやく説明していきます!

タイトル
パネルの内容

パネルの基本形

「panel-foote」部分は省略して使われることが多いです。

※基本形サンプル

タイトル
パネルの内容

「panel-heading」のところにhタグを挿入時の注意!

class属性の「panel-title」を追記してください。

パネルの色を変える!

パネルの色を変更するには「panel-default」と記載しているところを次のいづれかに変更してください。

panel-default
灰色(初期設定)
panel-primary
panel-success
panel-info
水色
panel-warning
黄色
panel-danger
panel-default
パネルの内容
panel-primary
パネルの内容
panel-success
パネルの内容
panel-info
パネルの内容
panel-warning
パネルの内容
panel-danger
パネルの内容

パネルの中にテーブル(table)を挿入できます!

Bootstrapでは、よく使う機能です。下記のページで説明しています!