基礎 - 按鈕基礎知識

描述

按鈕可以用更少的標記建立。Foundation 中可以透過下面列出的兩個標籤來建立按鈕 −

<a> − 當你的按鈕是到另一個頁面的連結或頁面中某個錨點時可以使用它。一般而言無需 JavaScript 來與錨點協同工作。
<button> − 當需要按鈕執行某些操作時可以使用它。始終需要 JavaScript 函式才能在 <button> 元素中工作。

示例

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

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

   </head>

   <body>
      <a href = "contact.html" class = "button">Contact Us</a>
      <a href = "#gallery" class = "button">Gallery</a>

      <button type = "button" class = "success button">Success</button>
      <button type = "button" class = "alert button">Alert</button>

      <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>

輸出

讓我們執行以下步驟來了解上面給出的程式碼如何工作 −

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

foundation_basic_controls.htm

列印頁面