MENU
Web制作に役立つ情報まとめサイトです。
  1. ホーム
  2. コーディング
  3. Bootstrap3
  4. Bootstrap3に用意されているクラス【パネル・リスト編】

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

Bootstrap3
目次

グレーの枠

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>
Bootstrap3
レスポンシブ
  • URLをコピーしました！
目次