基础 CSS 厨房水槽徽章

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

Kitchen Sink具有在我们的网站和应用程序中运行良好的基础元素。徽章是用于突出显示消息等信息的标签，并以圆形图标显示。这些徽章可以有不同的颜色，描述它们的重要性或基于优先级需要采取的行动。

基础 CSS 厨房水槽徽章类：

• 徽章：用于创建带有圆角的徽章。
• 主标记：用于在文本中以天蓝色突出显示，标记为重要。
• 二级徽章：用于用灰色突出显示文本，将其标记为不太重要。
• 成功徽章：用于以绿色突出显示某项操作已完成的文本。
• 警示标志：用于以红色突出显示有危险的未完成动作的文本。
• 警告标志：用于突出显示带有表示某些警告动作的黄色的文本。

句法：

 ... 

示例：此示例描述了 Foundation CSS 中的 Kitchen Sink 简单徽章。

HTML

  

    Foundation CSS Kitchen Sink
    
    
    

  

    
        
            GeeksforGeeks
         
        Foundation CSS Kitchen Sink Badge
         
        1 
        GFG 
        Notification 
    

输出：

基础 CSS 厨房水槽徽章

示例：此示例描述了 Foundation CSS 中带有颜色变体的 Kitchen Sink 字母徽章。

HTML

  

    Foundation CSS Kitchen Sink
    
    
    

  

    
        
          GeeksforGeeks
          
        Foundation CSS Kitchen Sink Badges
         
        Pri 
        Sec 
        S 
        A 
        W 
    

输出：

基础 CSS 厨房水槽徽章

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