リストの書式:Bootstrapコードまとめ
|

Bootstrapのコードを少しずつまとめていきます。
今回はリストの書式です。
リストの表示
Bootstrapでは、ul要素とli要素で作成したリストは以下のようになります。
HTML
<ul> <li>福岡県</li> <li>大分県</li> <ul> <li>中津市</li> <li>宇佐市</li> <li>豊後高田市</li> </ul> <li>佐賀県</li> <li>長崎県</li> </ul>
ブラウザでの表示
左に余白が入り、各項目は●、下位項目は○のマーカーが表示されます。
左の余白を無くし、上位項目からマーカー削除
リストにclass「list-unstyled」を適用します。
HTML
<ul class="list-unstyled"> <li>福岡県</li> <li>大分県</li> <ul> <li>中津市</li> <li>宇佐市</li> <li>豊後高田市</li> </ul> <li>佐賀県</li> <li>長崎県</li> </ul>
ブラウザでの表示
リストを横に並べる
リストにclass「list-inline」を適用します。
HTML
<ul class="list-inline"> <li>福岡県</li> <li>大分県</li> <li>佐賀県</li> <li>長崎県</li> </ul>
ブラウザでの表示
マーカーは表示されません
定義リストの表示
Bootstrapでは、dl・dt・dd要素で作成した定義リストは以下のようになります。
HTML
<dl> <dt>酸素</dt> <dd>原子番号 8、原子量 16.00 の非金属元素である。</dd> <dt>水素</dt> <dd>原子番号 1 、原子量 1.00794の非金属元素である。</dd> <dt>炭素</dt> <dd>原子番号 6、原子量 12.01 の元素で、元素記号は C である。</dd> </dl>
ブラウザでの表示
用語と意味を横に並べて配置
定義リストにclass「dl-horizontal」を適用します。
HTML
<dl class="dl-horizontal"> <dt>酸素</dt> <dd>原子番号 8、原子量 16.00 の非金属元素である。</dd> <dt>水素</dt> <dd>原子番号 1 、原子量 1.00794の非金属元素である。</dd> <dt>炭素</dt> <dd>原子番号 6、原子量 12.01 の元素で、元素記号は C である。</dd> </dl>