リストグループの書式：Bootstrapコードまとめ

リストグループの作成

ul要素にclass「list-group」を適用します。

li要素にclass「list-group-item」を適用します。

HTML

<ul class="list-group">
   <li class="list-group-item">テーブルヤシ</li>
   <li class="list-group-item">ホヤ・カルノサ</li>
   <li class="list-group-item">サンスベリア・ハニー</li>
   <li class="list-group-item">ポトス</li>
   <li class="list-group-item">ガジュマル</li>
</ul>

ブラウザでの表示

リストグループにリンクを貼る場合

div要素にclass「list-group」を適用します。

a要素にclass「list-group-item」を適用します。

さらに、span要素に「active」で現在ページを表示、
span要素に「disabled」でマウスオーバー時にクリック不可マークを表示します。

HTML

<div class="list-group">
  <a href="#" class="list-group-item">テーブルヤシ</a>
  <a href="#" class="list-group-item">ホヤ・カルノサ</a>
  <span class="list-group-item active">サンスベリア・ハニー</span>
  <a href="#" class="list-group-item">ポトス</a>
  <span class="list-group-item disabled">ガジュマル</span>
</div>

ブラウザでの表示

リストグループの色

li要素又はa要素に以下のclassを追加します。

HTML

<ul class="list-group">
   <li class="list-group-item">色指定無し</li>
   <li class="list-group-item list-group-item-success">successの色</li>
   <li class="list-group-item list-group-item-info">infoの色</li>
   <li class="list-group-item list-group-item-warning">warningの色</li>
   <li class="list-group-item list-group-item-danger">dangerの色</li>
</ul>

ブラウザでの表示

ヘッダーと本文で構成されるリストグループ

見出しの要素にclass「list-group-item-heading」、
本文の要素にclass「list-group-item-text」を適用します。

見出しはh1～h6、本文はpで作成するのが一般的です。

HTML

<div class="list-group">
  <a href="#" class="list-group-item">
    <h5 class="list-group-item-heading"><b>テーブルヤシ</b></h5>
    <p class="list-group-item-text">見た目もかわいらしく、室内でも育てやすい人気の観葉植物です。</p>
  </a>
  <a href="#" class="list-group-item">
    <h5 class="list-group-item-heading"><b>ホヤ・カルノサ</b></h5>
    <p class="list-group-item-text">乾燥に強く、日陰でも丈夫に育てる事ができます。花を咲かせるには、明るい日陰が望ましいです。</p>
  </a>
  <span class="list-group-item active">
    <h5 class="list-group-item-heading"><b>サンスベリア・ハニー</b></h5>
    <p class="list-group-item-text">乾燥に強くなかなか枯死しない。日照不足・低温・過湿にも強いです。</p>
  </span>
  <a href="#" class="list-group-item">
    <h5 class="list-group-item-heading"><b>ポトス</b></h5>
    <p class="list-group-item-text">室内向け観葉植物の代表格ポトスは、初心者にも育てやすくおすすめです。</p>
  </a>
  <span class="list-group-item disabled">
    <h5 class="list-group-item-heading"><b>ガジュマル</b></h5>
    <p class="list-group-item-text">寒さや日陰にも耐え、どんな環境でもなじみやすいため、室内で育てやすい品種です。</p>
  </span>
</div>

ブラウザでの表示

バッジの表示

span要素にclass「badge」を適用し、中に表示する文字を記述します。

HTML

<div class="list-group">
  <a href="#" class="list-group-item">市<span class="badge">790</span></a>
  <a href="#" class="list-group-item">特別区<span class="badge">23</span></a>
  <a href="#" class="list-group-item">町<span class="badge">745</span></a>
  <a href="#" class="list-group-item">村<span class="badge">183</span></a>
  <a href="#" class="list-group-item active">合計<span class="badge">1741</span></a>
</div>

ブラウザでの表示