Bootstrapでリストのデザイン設定

HTML・CSS

Bootstrapでリストをデザインするには、classに”list-group”と”list-group-item”を使います。
参考ページ:List group

list

上のリストを表示する設定が下のHTMLで、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>
	<li class="list-group-item">リスト4</li>
</ul>

リンク要素をリストとしたい場合は、下のようにa(アンカータグ)を使います。

<div class="list-group">
	<a href="#" class="list-group-item">リスト1</a>
	<a href="#" class="list-group-item">リスト2</a>
	<a href="#" class="list-group-item">リスト3</a>
	<a href="#" class="list-group-item">リスト4</a>
</div>
スポンサーリンク

コメント

タイトルとURLをコピーしました