Foundation 列表学习笔记

在基础前端框架中，Foundation 是一个非常流行的选择。其中，列表是网页设计中最基本、最常见的元素之一。Foundation 提供了多种列表样式，让我们可以根据不同需求来做选择。本文将介绍 Foundation 中常用的列表样式，并提供相应的代码实例。

无序列表

无序列表使用 <ul> 标签表示，其中每个列表项由 <li> 标签包裹。样式类 .no-bullet 表示移除默认的黑色圆点标识。

htmlCopy Code
<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

<ul class="no-bullet">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

有序列表

有序列表使用 <ol> 标签表示，其中每个列表项同样由 <li> 标签包裹。样式类 .lower-alpha 表示字母小写的顺序标识序号，.decimal 表示阿拉伯数字顺序标识序号，.lower-roman 表示罗马数字小写顺序标识序号。

htmlCopy Code
<ol>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<ol class="lower-alpha">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<ol class="decimal">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<ol class="lower-roman">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

带图标的列表

在 Foundation 中，我们还可以为列表项添加图标。样式类 .circle 表示使用实心圆作为图标，.disc 表示使用空心圆，.square 表示使用实心正方形。

htmlCopy Code
<ul class="circle">
  <li>List item with circle icon</li>
  <li>List item with circle icon</li>
  <li>List item with circle icon</li>
</ul>

<ul class="disc">
  <li>List item with disc icon</li>
  <li>List item with disc icon</li>
  <li>List item with disc icon</li>
</ul>

<ul class="square">
  <li>List item with square icon</li>
  <li>List item with square icon</li>
  <li>List item with square icon</li>
</ul>

以上就是 Foundation 中常用的列表样式。通过这些样式，我们可以很容易地为网页添加清晰、易读、美观的列表内容。