Semantic-UI 列表宽松变体

在 Semantic-UI 中，列表是一种用于显示项目列表的标准标记。 宽松（loose）变体是列表的另一种样式，它具有更宽的行距和更大的字体大小。

如何使用宽松变体

宽松变体很容易使用，只需要将 list class 与 bulleted 或 ordered class 相结合即可。

<!-- 无序列表 -->
<ul class="ui list bulleted loose">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<!-- 有序列表 -->
<ol class="ui list ordered loose">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

为什么要使用宽松变体

使用宽松变体可以更加清晰地显示列表中的项目，并且使列表更加易于阅读。 它还可以帮助用户更好地区分不同的项目，使他们更容易记住。

例如，在以下列表中，项目很难区分：

• Item 1
• Item 2
• Item 3

但是，当您将一个宽松的变体应用于列表时，项目变得更加清晰：

• Item 1

• Item 2

• Item 3

总结

宽松变体是 Semantic-UI 中一个非常有用的列表样式，可使列表更加清晰易读。 您只需要将 list class 与 bulleted 或 ordered class 相结合即可。