List group（リストグループ）
リストグループを表示します。
同じようなものにパネル・Wellsがありますが、見かけ・表示内容に差異がありますので用途に合わせてお使いください。
サンプル01－リストグループ表示
- リストグループ１
- リストグループ２
- リストグループ３
- リストグループ４
- リストグループ５
仕様
表示のみのリストグループは<ul>・<li>で記述します
コーディング
- 01行目
- リストグループで表示したいコンテンツを.list-groupで囲みます
- 02-06行目
- リスト内容に.list-group-itemを指定します
サンプル02－リストグループにバッジを表示
- 14リストグループ１
- 2リストグループ２
- リストグループ３
- リストグループ４
- 8リストグループ５
仕様
リストグループにバッジを表示する事ができ、指定されたリスト項目の右端に表示されます
コーディング
- 02･03･06行目
- バッジを表示したいリスト項目に.badgeを指定する
サンプル03－リンク付きリストグループ
仕様
リンクするリストグループは<div>・<a>で記述します
コーディング
- 01行目
- リストグループで表示したいコンテンツを.list-groupで囲みます
- 02-06行目
- リスト内容に.list-group-itemを指定します
アクティブ表示する項目には.activeを指定します
サンプル04－リンク・ヘッダ・コンテンツ付きリストグループ
仕様
リストグループのリスト項目に、ヘッダ・コンテンツという記述もできます
※リンクが無いリストグループでも使えます
コーディング
- 01行目
- リストグループで表示したいヘッダ・コンテンツを.list-groupで囲みます
- 02行目
- リスト内容に.list-group-itemを指定します
アクティブ表示する項目には.activeを指定します - 03･07行目
- ヘッダに.list-group-item-headingを指定します
- 04･08行目
- コンテンツに.list-group-item-textを指定します