📅  最后修改于: 2023-12-03 15:34:55.679000             🧑  作者: Mango
在 Semantic-UI 中,可以使用多种子标题类型来帮助组织和展示页面内容。下面将介绍几种常用的子标题类型及其使用方法。
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 子标题类型,可以根据不同情况灵活运用。