Bootstrap中的列表的使用

 

列表

无序列表

排列顺序无关紧要的一列元素。

• 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

复制

<ul>
  <li>...</li>
</ul>

有序列表

顺序至关重要的一组元素。

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

复制

<ol>
  <li>...</li>
</ol>

无样式列表

移除了默认的 

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

复制

<ul class="list-unstyled">
  <li>...</li>
</ul>

内联列表

通过设置 

display: inline-block;

 并添加少量的内补（padding），将所有元素放置于同一行。

• Lorem ipsum

 Phasellus iaculis Nulla volutpat

复制

<ul class="list-inline">
  <li>...</li>
</ul>