Bootstrap3に用意されているクラス【パネル・リスト編】

2015年9月16日2023年9月30日

グレーの枠

well

グレーの囲み枠を表示してくれるクラスです。

デフォルト well

…

<div class="well">...</div>

大きめの枠 well-lg

…

<div class="well well-lg">...</div>

小さめの枠 well-sm

…

<div class="well well-sm">...</div>

パネル

panel panel-default

.panel .panel-default でパネルを、.panel-bodyで余白を作ってくれます。

デフォルトのパネル

<div class="panel panel-default">
  <div class="panel-body">
    デフォルトのパネル
  </div>
</div>

panel-heading

見出し付

タイトル

コンテンツ

<div class="panel panel-default">
  <div class="panel-heading">タイトル</div>
  <div class="panel-body">
    デフォルトのパネル
  </div>
</div>

panel-title

.panel-titleでタイトルを付けることもできます。

タイトル

コンテンツ

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">タイトル</h3>
  </div>
  <div class="panel-body">
    デフォルトのパネル
  </div>
</div>

panel-footer

フッターパネル

コンテンツ

フッターパネル

<div class="panel panel-default">
  <div class="panel-body">
    デフォルトのパネル
  </div>
  <div class="panel-footer">フッターパネル</div>
</div>

panel panel-***

パネルの色変更

panel panel-primary

Panel content

panel panel-success

Panel content

panel panel-info

Panel content

panel panel-warning

Panel content

panel panel-danger

Panel content

<div class="panel panel-primary">...</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>

リスト・グループ

list-group

基本

リスト1
リスト2
リスト3
リスト4
リスト5

<ul class="list-group">
  <li class="list-group-item">リスト1</li>
  <li class="list-group-item">リスト2</li>
  <li class="list-group-item">リスト3</li>
  <li class="list-group-item">リスト4</li>
  <li class="list-group-item">リスト5</li>
</ul>

badge

バッジ

14リスト1
2リスト2
1リスト3

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    リスト1
  </li>
</ul>

list-group-item-***

色変更

list-group-item-success　成功
list-group-item-info　情報
list-group-item-warning　注意
list-group-item-danger　危険　エラー

<ul class="list-group">
  <li class="list-group-item list-group-item-success">list-group-item-success</li>
  <li class="list-group-item list-group-item-info">list-group-item-info</li>
  <li class="list-group-item list-group-item-warning">list-group-item-warning</li>
  <li class="list-group-item list-group-item-danger">list-group-item-danger</li>
</ul>

リスト・グループ（リンク用）

ulリストではなくdivで囲み、アンカータグを書くだけでリンクリストができます。
activeでONの状態にもできます。

リスト1 リスト2 リスト3 リスト4 リスト5

<div class="list-group">
  <a href="#" class="list-group-item active">リスト1</a>
  <a href="#" class="list-group-item">リスト2</a>
  <a href="#" class="list-group-item">リスト3</a>
  <a href="#" class="list-group-item">リスト4</a>
  <a href="#" class="list-group-item">リスト5</a>
</div>

disabled

使用不可

リスト1 リスト2 リスト3

<div class="list-group">
  <a href="#" class="list-group-item disabled">リスト1</a>
  <a href="#" class="list-group-item">リスト2</a>
  <a href="#" class="list-group-item">リスト3</a>
</div>