とほほのBootstrap 4入門

1. トップ
2. Bootstrap 4入門
3. リストグループ

リストグループ

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

<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 は無効化された要素を示します。

<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> で押下可能なリストグループを構成することもできます。

<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>

<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 はボーダーの無いリストグループを表示します。

<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-* でコンテキストに応じた色の要素を表示します。

<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 はコンテンツをフェードイン・フェードアウトします。

<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>

---