Foundation - 安裝

在本章中，我們將討論如何在網站上安裝和使用 Foundation。

下載 Foundation

當你開啟連結 foundation.zurb.com 時，你會看到如下所示的螢幕 -

點選下載 Foundation 6按鈕，你將被重定向到另一個頁面。

在這裡你可以看到四個按鈕 -

下載全部 - 如果你希望擁有框架中的所有內容，例如純 CSS 和 JS，你可以下載此版本的 Foundation。
下載基本版 - 它將下載簡單版本，其中包括網格、按鈕、排版等。
自定義下載 - 這將下載 Foundation 的自定義庫，它包括元素並定義列的大小、字型大小、顏色等。
透過 SCSS 安裝 - 這將重定向你到文件頁面，以安裝 Foundation 用於網站。

你可以點選下載全部按鈕來獲取框架中的所有內容，即 CSS 和 JS。由於檔案包含框架中的所有內容，因此每次你都不需要為單個功能包含單獨的檔案。在撰寫本教程時，下載了最新版本（Foundation 6）。

檔案結構

下載 Foundation 後，解壓縮 ZIP 檔案，你將看到以下檔案/目錄結構 -

如你所見，有編譯後的 CSS 和 JS (foundation.*)，以及編譯和壓縮後的 CSS 和 JS (foundation.min.*)。

在本教程中，我們使用的是庫的 CDN 版本。

HTML 模板

使用 Foundation 的基本 HTML 模板如下所示 -

線上演示

<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <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>
      <h1>Hello, world!</h1>
   </body>
</html>

以下部分詳細描述了上述程式碼。

HTML5 文件型別

Foundation 包含某些 HTML 元素和 CSS 屬性，這些屬性需要使用 HTML5 文件型別。因此，以下 HTML5 文件型別的程式碼應包含在你使用 Foundation 的所有專案開始部分。

<!DOCTYPE html>
<html>
   ....
</html>

移動優先

它有助於響應移動裝置。你需要將視口元標籤包含到<head>元素中，以確保在移動裝置上正確渲染和觸控縮放。

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

width屬性控制裝置的寬度。將其設定為 device-width 將確保它在各種裝置（手機、桌面電腦、平板電腦……）上正確渲染。
initial-scale = 1.0確保網頁載入時，將以 1:1 的比例渲染，並且不會應用任何縮放。

元件初始化

Foundation 中需要 jQuery 指令碼才能使用模態框和下拉選單等元件。

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

輸出

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

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

列印頁面