### 無序列表 排列順序*無關緊要*的一列元素。 * 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）內，列表將變為默認堆疊排列的布局方式。