语义 UI 占位符内容

Semantic UI是一个开源框架，它使用 CSS 和 jQuery 构建出色的用户界面。它与使用的引导程序相同，并且有很多不同的元素可用于使您的网站看起来更令人惊叹。它配备了预构建的语义组件，可帮助使用用户友好的 HTML 创建响应式布局，并使用预定义的 CSS 和 JQuery 来整合不同的框架。

在本文中，我们将了解Semantic-UI Placeholder Content 。占位符用于为即将出现在布局中的内容保留空间。它可以用于四种类型的内容：段落、标题、标题和图像。

语义 UI 占位符内容：

Lines :用于占位符可以包含多行文本
段落：用于显示段落内容布局的占位符。多个段落用于将行组合在一起。
Headers ：用于显示标题内容的占位符。标题内容的块大小略大于段落的块大小。
图片：用于显示图片内容的占位符布局。此外，使用 .square 和 .rectangular 类来设置图像占位符布局的纵横比。

句法：

示例 1：以下示例说明了在占位符内容中使用行。

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

输出：

示例 2：以下示例说明使用图像标题作为占位符内容。

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

输出：

示例 3：以下示例将段落说明为占位符内容。

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

输出：

示例 4：以下示例将图像说明为占位符内容。

HTML



  

    

  

    
        GeeksforGeeks
        Semantic UI Placeholder Content

输出：

参考： https://semantic-ui.com/elements/placeholder.html