Foundation 列表

Foundation 列表是一种用于展示数据的标准格式，常见于网页和移动应用中。使用 Foundation 列表可以方便地展示数据并进行交互操作。

基础结构

Foundation 列表使用 <ul> 和 <li> 标签构建。基础结构如下所示：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

其中 <ul> 表示无序列表， <li> 表示列表项。在 Foundation 中，列表项可以使用更多的标签包裹内容，以实现更多的元素类型和样式。

Foundation 列表提供了多种样式，可以根据具体需求选择。常见的样式包括：

无样式列表：使用 .no-bullet 类可以去掉列表项前的符号。

<ul class="no-bullet">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

圆点列表：使用 .circle 类可以将列表项前的符号改为实心圆点。

<ul class="circle">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

方块列表：使用 .square 类可以将列表项前的符号改为实心方块。

<ul class="square">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

标记列表：使用 .disc 类可以将列表项前的符号改为实心圆点。

<ul class="disc">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

无序数字列表：使用 .no-bullet 和 .counter 类可以实现无序数字列表。

<ul class="no-bullet counter">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

水平列表：使用 .inline-list 类可以使列表项水平排列。

<ul class="inline-list">
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

Foundation 列表可以进行多级嵌套，以展示更多的数据层次关系。

<ul>
  <li>列表项1</li>
  <li>列表项2
    <ul>
      <li>列表项2.1</li>
      <li>列表项2.2</li>
    </ul>
  </li>
  <li>列表项3</li>
</ul>

Foundation 列表项支持自定义内容和样式，可以通过包裹更多的标签实现。例如，以下代码展示了自定义的列表项，包含一个标题、一段文本和一个图标。

<ul>
  <li>
    <h3>标题</h3>
    <p>文本内容</p>
    <i class="fi-check"></i>
  </li>
</ul>

Foundation 列表项可以添加交互操作，以实现更丰富的功能。常见的交互操作包括：

点击事件：为列表项添加 data-click 属性可以添加点击事件。

<ul>
  <li data-click="alert('点击了列表项')">列表项1</li>
  <li data-click="alert('点击了列表项')">列表项2</li>
  <li data-click="alert('点击了列表项')">列表项3</li>
</ul>

悬停状态：为列表项添加 hover 类可以实现鼠标悬停时的样式效果。

<ul>
  <li class="hover">列表项1</li>
  <li class="hover">列表项2</li>
  <li class="hover">列表项3</li>
</ul>

滑动状态：为列表项添加 active 类可以实现鼠标按下时的样式效果。

<ul>
  <li>列表项1</li>
  <li class="active">列表项2</li>
  <li>列表项3</li>
</ul>

Foundation 列表是一种简单实用的数据展示格式，具有多种样式和功能，可以根据具体需求进行选择和定制。掌握 Foundation 列表的使用方法可以为网页和移动应用的开发提供便利。