Foundation - 標籤基礎知識

描述

要建立一個標籤，你必須將 .label 類新增到一個元素中。例如，你可以使用 <span> 標籤或甚至其他標籤也行得通。標籤可用於描述另一個元素。可以透過提供一個標籤、一個唯一 ID，並在主元素中透過 aria-describedby 屬性引用 ID，將兩個元素繫結在一起。

示例

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

即時演示

<html>
   <head>
      <title>Label Basics</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <span class = "label">Default</span>
      <p aria-describedby = "email">Re: re: A Christmas gift for you!</p>
      <span class = "label" id = "email">Maximum Priority</span>

      
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，看看上面給出的程式碼是如何工作的 -

將上面給出的 html 程式碼儲存到 label_basics.html 檔案中。
在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

當多個標籤描述一個元素時，你必須將多個 ID 放入 aria-describedby 中。更多資訊請參閱 Label Multiple IDs。

foundation_media.htm

列印頁面