Semantic-UI Subheader 标题内容

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它使用一个类将 CSS 添加到元素中。 Semantic-UI 有非常酷的标题，可以与文本、图标等一起使用。

标题提供了内容的简短摘要。 Semantic-UI 有非常酷的标题，可以与文本、图标等一起使用。语义 UI 具有不同类型的标题变体，例如页面标题、内容标题、图标标题和子标题标题。在本文中，我们将了解 Semantic UI 中的 subheader header。

Sub Header 是一个 Header 元素，它被格式化为更小的或不强调的内容。要将标题转换为语义 UI 中的子标题，我们使用.sub类以及.ui和.header类。 .sub 类通过使用较小字体去强调内容，将语义 UI 标头转换为子标头。 .sub 类可用于

、 和

到

元素。

语义 UI 子标题标题类：

• sub： .sub 类通过缩小字体大小将标题元素转换为子标题。

句法：

    ...content
    

        ...Content
    

示例 1：此示例演示了语义 UI 中基本标题和子标题之间的比较。

HTML

  

    Semantic UI
    

  

    
        
            GeeksforGeeks
        
        Semantic UI subheader header
        
    
    
        Geeksforgeeks header
    
    
        Geeksforgeeks subheader
    
        
    
    
      
    
    

  

输出：

输出

示例 2：此示例通过使用 、

和

到

元素来演示语义 UI 中的子标题。

HTML

  

    Semantic UI
    

  

    
        
            GeeksforGeeks
        
        Semantic UI subheader header
        
    
    
        div element Geeksforgeeks subheader
    
    
        span element Geeksforgeeks subheader
    
    
        h1 element Geeksforgeeks subheader
    
    
        h2 element Geeksforgeeks subheader
    
    
        h3 element Geeksforgeeks subheader
    
    
        h4 element Geeksforgeeks subheader
    
    
        h5 element Geeksforgeeks subheader
    
    
        h6 element Geeksforgeeks subheader
    
  
        
    
    
      
    
    

  

输出：

输出

参考： https://semantic-ui.com/elements/header.html#subheader