対象読者
本記事は、次の方を対象にしています。
- HTML5/CSS/JavaScriptを使ってWebアプリケーションの画面作成ができる方
- デザインに自信のない方
リスト
業務アプリケーションのコンテンツでまとまりのある情報をあらわすときは、リスト形式にすると分かりやすくなります。ここでは、リストグループの使い方を説明します。
基本のリストグループ
リストグループを作成するには、ul要素を使います。ul要素のclass属性に"list-group"を指定します。リストのアイテムは、li要素のclass属性に"list-group-item"を指定します。
<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> </ul>
![基本のリストグループ](http://cz-cdn.shoeisha.jp/static/images/article/8223/8223_001.gif)
リストグループのアイテムの内容に応じてスタイルを変えるには、class属性に以下の属性を指定します。
用途 | class属性の指定 | 色 |
---|---|---|
成功 | 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">成功</li> <li class="list-group-item list-group-item-info">情報</li> <li class="list-group-item list-group-item-warning">注意</li> <li class="list-group-item list-group-item-danger">警告</li> </ul>
![リストグループのスタイル](http://cz-cdn.shoeisha.jp/static/images/article/8223/8223_003.gif)
有効化/無効化
リストグループのアイテムを有効にしたり無効にしたりすることもできます。有効にするときはclass属性に"active"、無効にするときはclass属性に"disable"を指定します。有効/無効化すると背景色が変わります。
<div class="list-group"> <a href="#" class="list-group-item active">受信ボックス <span class="badge">5</span> </a> <a href="#" class="list-group-item">送信ボックス</a> <a href="#" class="list-group-item disabled">ごみ箱</a> </div>
![リストアイテムの有効/無効化](http://cz-cdn.shoeisha.jp/static/images/article/8223/8223_002.gif)