📜  Semantic-UI 列表项内容(1)

📅  最后修改于: 2023-12-03 15:20:04.838000             🧑  作者: Mango

Semantic-UI 列表项内容

Semantic-UI 是一个基于语义化的CSS框架,提供了丰富的UI组件,包括列表项内容。列表项内容非常有用,可以用于展示有序/无序列表、信息展示等场景。

有序列表

有序列表可以通过 ol 标签和 list 类来实现。每个列表项内容可以通过 li 标签和 content 类来定义。

<ol class="ui list">
  <li class="content">第一项</li>
  <li class="content">第二项</li>
  <li class="content">第三项</li>
</ol>
无序列表

无序列表可以通过 ul 标签和 list 类来实现。每个列表项内容可以通过 li 标签和 content 类来定义。

<ul class="ui list">
  <li class="content">第一项</li>
  <li class="content">第二项</li>
  <li class="content">第三项</li>
</ul>
信息展示

列表项内容也可以用于信息展示。通过 div 标签和 ui items 类来定义多个信息展示项。每个信息展示项也可以通过 div 标签和 item 类来定义。

<div class="ui items">
  <div class="item">
    <div class="content">
      <div class="header">标题1</div>
      <div class="description">描述1</div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <div class="header">标题2</div>
      <div class="description">描述2</div>
    </div>
  </div>
  <div class="item">
    <div class="content">
      <div class="header">标题3</div>
      <div class="description">描述3</div>
    </div>
  </div>
</div>

以上是 Semantic-UI 列表项内容的用法介绍。可以根据实际需求,选择适合的方式来实现相应功能。