基础 CSS 厨房水槽标注

Foundation CSS是由 ZURB 基金会于 2011 年 9 月构建的开源和响应式前端框架，它使设计漂亮的响应式网站、应用程序和电子邮件变得非常容易，这些网站、应用程序和电子邮件看起来很棒并且可以在任何设备上访问。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。它被许多公司使用，例如 Facebook、eBay、Mozilla、Adobe，甚至迪士尼。该框架建立在类似 Saas 的引导程序上。它更加复杂、灵活且易于定制。它还带有 CLI，因此很容易与模块捆绑器一起使用。它提供了 Fastclick.js 工具，用于在移动设备上更快地呈现。

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。 Callout将 Foundation 5 中的面板和警报组合到一个通用容器组件中。它可用于创建带有一些边框、填充和视觉样式的弹出框元素。它通常用于通知用户一些特殊的事情：通知、提示/技巧、折扣、需要的操作等。它可以通过应用.callout类来使用。

基础 CSS 厨房水槽标注类：

标注可以使用.primary着色， .次要, .成功，.警告， 要么 。警报类。

• 主要：用天蓝色突出显示文本，标记为重要。
• 次要的：用灰色突出显示不太重要的文本。
• 成功：用绿色突出显示某些操作完成的文本。
• 警告：用红色突出显示有危险的未完成操作的文本。
• 警告：用黄色突出显示表示某些警告操作的文本。

标注可以使用.small和.large类来调整大小。

• .small：减少内容周围的填充。
• .large：增加内容周围的填充。

语法：

    ...

示例：此示例说明了 Foundation CSS 中的厨房水槽标注。

HTML

  

    Foundation CSS Kitchen Sink Callout
      
    
    
      
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Callout
        
         
            This is a default callout. 
        
        
            This is a primary class callout. 
        
        
            This is a secondary class callout. 
        
        
            This is a success class callout. 
        
        
            This is an alert class callout. 
         
        
            This is a warning class callout. 
         
    

  

输出：

基础 CSS 厨房水槽标注

示例：此示例说明了 Foundation CSS 中的标注大小。

HTML

  

    
        Foundation CSS Kitchen Sink Callout
    
      
    
    
      
    
    
    

  

    
        GeeksforGeeks
        Foundation CSS Kitchen Sink Callout
        
         
            This is a default callout. 
        
         
            This is a small class callout. 
        
         
            This is a large class callout. 
        
    

  

输出：

基础 CSS 厨房水槽标注

参考：https://get.foundation/sites/docs/kitchen-sink.html#callout