转载

Bootstrap 排版含描述的短语列表

描述

带有描述的短语列表。

自然排列的描述

语法：

<dl>

<dt>...</dt>

<dd>...</dd>

</dl>

案例：

<dl>

      <dt>Description lists</dt>

      <dd>A description list is perfect for defining terms.</dd>

      <dt>Euismod</dt>

      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>

      <dd>Donec id elit non mi porta gravida at eget metus.</dd>

      <dt>Malesuada porta</dt>

      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

</dl>

运行结果：

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

水平排列的描述

.dl-horizontal 可以让 <dl> 内的短语及其描述排在一行。开始是像 <dl> 的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

语法：

<dl class="dl-horizontal">

<dt>...</dt>

<dd>...</dd>

</dl>

案例：

<dl class="dl-horizontal">

      <dt>Description lists</dt>

      <dd>A description list is perfect for defining terms.</dd>

      <dt>Euismod</dt>

      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>

      <dd>Donec id elit non mi porta gravida at eget metus.</dd>

      <dt>Malesuada porta</dt>

      <dd>Etiam porta sem malesuada magna mollis euismod.</dd>

      <dt>Felis euismod semper eget lacinia</dt>

      <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

</dl>

运行结果：

Description lists: A description list is perfect for defining terms.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.