Semantic-UI 标头浮动变体

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。

Semantic-UI Header提供了内容的简短摘要，它为我们提供了不同的 header 变体，如 Dividing、Block、Attached、Floating、Text alignment、Colored 和 Inverted 变体。在本文中，我们将了解 header 的Floating 变体。此变体用于将我们的标题浮动到屏幕的左侧或右侧。

Semantic-UI Header Variations 浮动变体类：

• left floated：该类用于在屏幕左侧浮动标题。
• right floated：该类用于在屏幕右侧浮动标题。

句法：

    ...

下面 示例说明了Semantic-UI Header Variations Floating Variant：

示例 1：在此示例中，我们将在右侧浮动标题。

输出：

Semantic-UI 标头浮动变体

示例 2：在此示例中，我们将在左侧浮动标题。

HTML

  

    

  

    
        

          GeeksforGeeks
        
        
          Semantic UI Header Variations Floating
        
        


    
    

        
            GeeksforGeeks Right Floated
        
        


        

            With the idea of imparting programming
            knowledge, Mr. Sandeep Jain, an IIT
            Roorkee alumnus started a dream,
            GeeksforGeeks. Whether programming excites
            you or you feel stifled, wondering how to
            prepare for interview questions or how to
            ace data structures and algorithms,
            GeeksforGeeks is a one-stop solution.
        
  
    

  

输出：

Semantic-UI 标头浮动变体

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