目次
グレーの枠
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の状態にもできます。
<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
使用不可
<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>