とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > リストグループ

リストグループ

.list-group はリストグループを、.list-group-item はその要素を表示します。

Sample
  • Item #1
  • Item #2
  • Item #3
Code
<ul class="list-group">
  <li class="list-group-item">Item #1</li>
  <li class="list-group-item">Item #2</li>
  <li class="list-group-item">Item #3</li>
</ul>

アクティブ・無効化

.active はアクティブな要素を、.disabled は無効化された要素を示します。

Sample
  • Normal item
  • Active item
  • Disabled item
Code
<ul class="list-group">
  <li class="list-group-item">Normal item</li>
  <li class="list-group-item active">Active item1</li>
  <li class="list-group-item disabled">Disabled item2</li>
</ul>

<li> の代わりに <a> や <button> で押下可能なリストグループを構成することもできます。

Sample
List #1 List #2 List #3
Code
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">List #1</a>
  <a href="#" class="list-group-item list-group-item-action">List #2</a>
  <a href="#" class="list-group-item list-group-item-action">List #3</a>
</div>
Sample
Code
<div class="list-group">
  <button type="button" class="list-group-item list-group-item-action">Button #1</button>
  <button type="button" class="list-group-item list-group-item-action">Button #2</button>
  <button type="button" class="list-group-item list-group-item-action">Button #3</button>
</div>

フラッシュ

.list-group-flush はボーダーの無いリストグループを表示します。

Sample
  • Item #1
  • Item #2
  • Item #3
Code
<ul class="list-group list-group-flush">
  <li class="list-group-item">Item #1</li>
  <li class="list-group-item">Item #2</li>
  <li class="list-group-item">Item #3</li>
</ul>

コンテキスト

.list-group-item-* でコンテキストに応じた色の要素を表示します。

Sample
  • Primary
  • Secondary
  • Success
  • Danger
  • Warning
  • Info
  • Light
  • Dark
Code
<ul class="list-group">
  <li class="list-group-item list-group-item-primary">Primary</li>
  <li class="list-group-item list-group-item-secondary">Secondary</li>
  <li class="list-group-item list-group-item-success">Success</li>
  <li class="list-group-item list-group-item-danger">Danger</li>
  <li class="list-group-item list-group-item-warning">Warning</li>
  <li class="list-group-item list-group-item-info">Info</li>
  <li class="list-group-item list-group-item-light">Light</li>
  <li class="list-group-item list-group-item-dark">Dark</li>
</ul>

タブ切り替え

.tab-content, .tab-pane を用いて、メニューに応じて内容を切り替えることができます。.fade はコンテンツをフェードイン・フェードアウトします。

Sample
Content #1...
Content #2...
Content #3...
Code
<div class="container-fuild border">
  <div class="row">
    <div class="col-4">
      <div class="list-group" id="list-tab" role="tablist">
        <a class="list-group-item list-group-item-action active" id="tab-menu-1"
            data-toggle="list" href="#tab-content-1"
            role="tab" aria-controls="tab-content-1">Menu #1</a>
        <a class="list-group-item list-group-item-action" id="tab-menu-2"
            data-toggle="list" href="#tab-content-2"
            role="tab" aria-controls="tab-content-2">Menu #2</a>
        <a class="list-group-item list-group-item-action" id="tab-menu-3"
            data-toggle="list" href="#tab-content-3"
            role="tab" aria-controls="tab-content-3">Menu #3</a>
      </div>
    </div>
    <div class="col-8">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="tab-content-1"
            role="tabpanel" aria-labelledby="tab-menu-1">Content #1...</div>
        <div class="tab-pane fade" id="tab-content-2"
            role="tabpanel" aria-labelledby="tab-menu-2">Content #2...</div>
        <div class="tab-pane fade" id="tab-content-3"
            role="tabpanel" aria-labelledby="tab-menu-3">Content #3...</div>
      </div>
    </div>
  </div>
</div>
Copyright (C) 2015-2019 杜甫々
初版:2015年9月6日 最終更新:2019年1月6日
http://www.tohoho-web.com/bootstrap/list_group.html