Bootstrap によるレスポンシブ Web デザイン

リストグループを使う

次はリストグループを使ってみます．まずクラスを指定せずに <ul> と <li> で箇条書きを作成すると次のような結果になります．

index.html（抜粋）コピー
<ul>
  <li>経営学部</li>
  <li>法学部</li>
  <li>現代社会学部</li>
</ul>

Bootstrap のリストグループを利用するには <ul> には .list-group クラスを，<li> には .list-group-item クラスを指定します．

index.html（抜粋）コピー
<ul class="list-group">
  <li class="list-group-item">経営学部</li>
  <li class="list-group-item">法学部</li>
  <li class="list-group-item">現代社会学部</li>
</ul>

リストグループの詳細についてはこちらを参照してください．

目次に戻る