Bootstrap 排版列表

Bootstrap 支持HTML 提供的三种类型的列表：无序列表、有序列表和描述列表。列表可以嵌套定义，可以在一个列表中，嵌套定义其它列表。嵌套没有类型和层级的限制。

1、无序列表

无序列表的各个表项，没有逻辑上的先后顺序。如：

1. <ul>
2.   <li>Lorem ipsum dolor sit amet</li>
3.   <li>Consectetur adipiscing elit</li>
4.   <li>Integer molestie lorem at massa</li>
5.   <li>Facilisis in pretium nisl aliquet</li>
6.   <li>Nulla volutpat aliquam velit
7.     <ul>
8.       <li>Phasellus iaculis neque</li>
9.       <li>Purus sodales ultricies</li>
10.       <li>Vestibulum laoreet porttitor sem</li>
11.       <li>Ac tristique libero volutpat at</li>
12.     </ul>
13.   </li>
14.   <li>Faucibus porta lacus fringilla vel</li>
15.   <li>Aenean sit amet erat nunc</li>
16.   <li>Eget porttitor lorem</li>
17. </ul>

默认情况下，无序列表的项目符号为实心圆。如果列表发生嵌套，浏览器会根据上下文，自动为内层列表添加缩进，并改变列表的项目符号。效果如图 3‑14所示：

图3-14 Bootstrap无序列表样式

2、有序列表

有序列表的各个表项，有逻辑上的先后顺序。如：

1. <ol>
2.   <li>Lorem ipsum dolor sit amet</li>
3.   <li>Consectetur adipiscing elit</li>
4.   <li>Integer molestie lorem at massa</li>
5.   <li>Facilisis in pretium nisl aliquet</li>
6.   <li>Nulla volutpat aliquam velit</li>
7.   <li>Faucibus porta lacus fringilla vel</li>
8.   <li>Aenean sit amet erat nunc</li>
9.   <li>Eget porttitor lorem</li>
10. </ol>

默认情况下，有序列表的项目符号为数字。效果如图 3‑15所示：

图3-15 Bootstrap有序列表样式

默认情况下，无序列表和有序列表带有列表项目符号，并根据上下文自动缩进显示。Bootstrap还定义了两个工具类，可以使用它们来定义无样式列表和行内列表。

1）无样式列表

如果为相应的 <ul> 或 <ol> 应用 .unstyled 类，就可以去掉列表的默认项目符号以及左内边距。如：

1. <ol class="unstyled">
2.   <li>Lorem ipsum dolor sit amet</li>
3.   <li>Consectetur adipiscing elit</li>
4.   <li>Integer molestie lorem at massa</li>
5.   <li>Facilisis in pretium nisl aliquet</li>
6.   <li>Nulla volutpat aliquam velit
7.   <ul>
8.     <li>Phasellus iaculis neque</li>
9.     <li>Purus sodales ultricies</li>
10.     <li>Vestibulum laoreet porttitor sem</li>
11.     <li>Ac tristique libero volutpat at</li>
12.   </ul>
13.   </li>
14.   <li>Faucibus porta lacus fringilla vel</li>
15.   <li>Aenean sit amet erat nunc</li>
16.   <li>Eget porttitor lorem</li>
17. </ol>

效果如图 3‑16所示：

图3-16 Boostrap无项目符号列表样式

2）行内列表

如果为相应的 <ul> 或 <ol> 应用 .inline 类，就可以让列表项水平排列一行, 同时每个列表项都有少量的内边距。如：

1. <ul class="inline">
2.   <li>Lorem ipsum</li>
3.   <li>Phasellus iaculis</li>
4.   <li>Nulla volutpat</li>
5. </ul>

效果如图 3‑17所示：

图3-17 Bootstrap行内列表样式

3、描述列表

描述列表与无序列表和有序列表的区别在于，它没有块级的 <li> 元素，而是每个列表项都由 <dt> 和 <dd> 元素共同组成。dt 代表 definition title（定义标题），dd 代表 definition description（定义描述）。如：

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 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>

默认情况下，无序列表的项目符号为实心圆。如果列表发生嵌套，浏览器会根据上下文，自动为内层列表添加缩进，并改变列表的项目符号。效果如图 3‑18所示：

图3-18 Bootstrap描述列表样式

如果希望词条和解释一对一并排显示，只需给 <dl> 标签加上class="dl-horizontal" 即可。并排显示适用于术语的定义/解释。如：

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 … 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 ….</dd>
11. </dl>

效果如图 3‑19所示：

图3-19 Bootstrap水平排列的描述列表

在水平布局时，如果词条过长而左边放不下，将被 text-overflow 属性截短。此外，在视口较窄的时候，词条和解释将自动变成默认垂直堆叠布局。