Coloring

优质

小牛编辑

117浏览

2023-12-01

描述 (Description)

对标签着色可以通过使用用于按钮的类和图标来完成。可以使用任何图标字体或基于图像的图标。

例子 (Example)

以下示例演示如何在Foundation中使用label coloring 。

<html>
   <head>
      <title>Label Coloring</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css">
   </head>
   <body>
      <div>
         <span class = "warning label">Warning</span>
         <span class = "success label">Success</span>
         <span class = "alert label">Alert</span>
         <span class = "secondary label">Secondary</span>
      </div>
      <br>
      <div>
         <span class = "success label"><i class = "fi-star"></i> Star Label</span>
         <span class = "alert label"><i class = "fi-lock"></i> Lock Label</span>
         <span class = "secondary label"><i class = "fi-share"></i> Share Label</span>
      </div>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>