スタッフによるブログです。WEBデザイン全般、IT関連、業務関連情報など。

  • 〒800-0222
  • 北九州市小倉南区中曽根4-16-2
  • TEL : 093-967-1128

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



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

Bootstrapのコードを少しずつまとめていきます。
今回はリストの書式です。

リストの表示

Bootstrapでは、ul要素とli要素で作成したリストは以下のようになります。

HTML

<ul>
  <li>福岡県</li>
  <li>大分県</li>
  <ul>
    <li>中津市</li>
    <li>宇佐市</li>
    <li>豊後高田市</li>
  </ul>
  <li>佐賀県</li>
  <li>長崎県</li>
</ul>

ブラウザでの表示
左に余白が入り、各項目は●、下位項目は○のマーカーが表示されます。

Bootstrapでul要素とli要素で作成したリスト

左の余白を無くし、上位項目からマーカー削除

リストに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-unstyled」を適用

リストを横に並べる

リストにclass「list-inline」を適用します。

HTML

<ul class="list-inline">
  <li>福岡県</li>
  <li>大分県</li>
  <li>佐賀県</li>
  <li>長崎県</li>
</ul>

ブラウザでの表示
マーカーは表示されません

リストにclass「list-inline」を適用

定義リストの表示

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>

ブラウザでの表示

Bootstrapでdl・dt・dd要素で作成した定義リスト

用語と意味を横に並べて配置

定義リストに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>

ブラウザでの表示
ウィンドウ幅が768px以上の時のみ有効、767px以下の場合は通常同様に横に並びません。

定義リストにclass「dl-horizontal」を適用