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

スポンサードリンク

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>

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください