### 无序列表 排列顺序*无关紧要*的一列元素。 * Lorem ipsum dolor sit amet * Consectetur adipiscing elit * Integer molestie lorem at massa * Facilisis in pretium nisl aliquet * Nulla volutpat aliquam velit * Phasellus iaculis neque * Purus sodales ultricies * Vestibulum laoreet porttitor sem * Ac tristique libero volutpat at * Faucibus porta lacus fringilla vel * Aenean sit amet erat nunc * Eget porttitor lorem ~~~html <ul> <li>...</li> </ul> ~~~ ### [](https://v3.bootcss.com/css/#有序列表)有序列表 顺序*至关重要*的一组元素。 1. Lorem ipsum dolor sit amet 2. Consectetur adipiscing elit 3. Integer molestie lorem at massa 4. Facilisis in pretium nisl aliquet 5. Nulla volutpat aliquam velit 6. Faucibus porta lacus fringilla vel 7. Aenean sit amet erat nunc 8. Eget porttitor lorem ~~~html <ol> <li>...</li> </ol> ~~~ ### [](https://v3.bootcss.com/css/#无样式列表)无样式列表 移除了默认的 `list-style` 样式和左侧外边距的一组元素（只针对直接子元素）。**这是针对直接子元素的**，也就是说，你需要对所有嵌套的列表都添加这个类才能具有同样的样式。 * Lorem ipsum dolor sit amet * Consectetur adipiscing elit * Integer molestie lorem at massa * Facilisis in pretium nisl aliquet * Nulla volutpat aliquam velit * Phasellus iaculis neque * Purus sodales ultricies * Vestibulum laoreet porttitor sem * Ac tristique libero volutpat at * Faucibus porta lacus fringilla vel * Aenean sit amet erat nunc * Eget porttitor lorem ~~~html <ul class="list-unstyled"> <li>...</li> </ul> ~~~ ### [](https://v3.bootcss.com/css/#内联列表)内联列表 通过设置 `display: inline-block;` 并添加少量的内补（padding），将所有元素放置于同一行。 * Lorem ipsum * Phasellus iaculis * Nulla volutpat ~~~html <ul class="list-inline"> <li>...</li> </ul> ~~~ ### [](https://v3.bootcss.com/css/#描述)描述 带有描述的短语列表。 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. ~~~html <dl> <dt>...</dt> <dd>...</dd> </dl> ~~~ #### [](https://v3.bootcss.com/css/#水平排列的描述)水平排列的描述 `.dl-horizontal` 可以让 `<dl>` 内的短语及其描述排在一行。开始是像 `<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. ~~~html <dl class="dl-horizontal"> <dt>...</dt> <dd>...</dd> </dl> ~~~ #### 自动截断 通过 `text-overflow` 属性，水平排列的描述列表将会截断左侧太长的短语。在较窄的视口（viewport）内，列表将变为默认堆叠排列的布局方式。