Bootstrap 排版 含描述的短语列表

W3CSchool > bootstrap3中文手册 > Bootstrap 设计排版 > Bootstrap 排版 含描述的短语列表

描述

带有描述的短语列表。

自然排列的描述

语法:

  1. <dl> 
  2.   <dt>...</dt> 
  3.   <dd>...</dd> 
  4. </dl>

案例:

  1. <dl> 
  2.       <dt>Description lists</dt> 
  3.       <dd>A description list is perfect for defining terms.</dd> 
  4.       <dt>Euismod</dt> 
  5.       <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> 
  6.       <dd>Donec id elit non mi porta gravida at eget metus.</dd> 
  7.       <dt>Malesuada porta</dt> 
  8.       <dd>Etiam porta sem malesuada magna mollis euismod.</dd> 
  9. </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> 的默认样式堆叠在一起,随着导航条逐渐展开而排列在一行。

语法:

  1. <dl class="dl-horizontal"> 
  2.   <dt>...</dt> 
  3.   <dd>...</dd> 
  4. </dl>

案例:

  1. <dl class="dl-horizontal"> 
  2.       <dt>Description lists</dt> 
  3.       <dd>A description list is perfect for defining terms.</dd> 
  4.       <dt>Euismod</dt> 
  5.       <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd> 
  6.       <dd>Donec id elit non mi porta gravida at eget metus.</dd> 
  7.       <dt>Malesuada porta</dt> 
  8.       <dd>Etiam porta sem malesuada magna mollis euismod.</dd> 
  9.       <dt>Felis euismod semper eget lacinia</dt> 
  10.       <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> 
  11. </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.

自动截断

通过 text-overflow 属性,水平排列的描述列表将会截断左侧太长的短语。在较窄的视口(viewport)内,列表将变为默认堆叠排列的布局方式。


没有找到答案?搜索一下吧!

学习导航


Bootstrap3中文开发手册参考网站
w3c.3306.biz 提供的内容仅用于学习或测试。所有内容均整理自互联网!目的是为了让更多读者欣赏,我们不保证内容的正确性,并对任何法律问题及风险不承担任何责任。 当您在浏览本站时,代表您已接受了本站的使用条款和隐私条款。(删除内容:512876994#qq.com)