📜  Semantic-UI 子标题类型(1)

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

Semantic-UI 子标题类型

在 Semantic-UI 中,可以使用多种子标题类型来帮助组织和展示页面内容。下面将介绍几种常用的子标题类型及其使用方法。

h1-h6 标题

Semantic-UI 中提供了六个级别的 h1-h6 标题,用法和 HTML 中的相同。例如:

<h1>这是一个 h1 标题</h1>
<h2>这是一个 h2 标题</h2>
<h3>这是一个 h3 标题</h3>
<h4>这是一个 h4 标题</h4>
<h5>这是一个 h5 标题</h5>
<h6>这是一个 h6 标题</h6>
页面标题

在页面顶部通常需要一个页面标题。可以使用 ui dividing header 类,例如:

<h1 class="ui dividing header">页面标题</h1>
条目标题

在列表或卡片中,可以使用 ui header 类来显示条目标题。例如:

<div class="ui card">
  <div class="content">
    <div class="header">卡片标题</div>
    <div class="meta">卡片副标题</div>
    <div class="description">卡片内容</div>
  </div>
</div>
组标题

在页面中需要对相关内容进行分组时,可以使用 ui dividing header 类来显示组标题。例如:

<div class="ui divider"></div>
<h2 class="ui dividing header">资源列表</h2>
小节标题

在页面中需要对一部分内容进行分节时,可以使用 ui attached header 类来显示小节标题。例如:

<div class="ui segment">
  <h3 class="ui attached header">小节标题</h3>
  <div class="ui attached segment">小节内容</div>
</div>

以上就是几种常用的 Semantic-UI 子标题类型,可以根据不同情况灵活运用。