Latest web development tutorials

Foundation 起步

什麼是Foundation？

  • Foundation 是一個免費的前端框架，用於快速開發。
  • Foundation 包含了HTML 和CSS 的設計模板，提供多種Web 上的UI 組件，如表單、按鈕、Tabs 等等。 同時也提供了多種JavaScript 插件。
  • Foundation 移動優先，可創建響應式網頁。
  • Foundation 適用於初學者和專業人士。
  • Foundation 已使用在Facebook, eBay, Samsung, Amazon, Disney等。

Note什麼是響應式網頁設計？
響應式Web設計(Responsive Web design)的理念是： 頁面的設計與開發應當根據用戶行為以及設備環境(系統平台、屏幕尺寸、屏幕定向等)進行相應的響應和調整。

從哪裡下載Foundation?

你可以通過以下兩種方式來獲取Foundation：

1、從官網下載最新版本： http://foundation.zurb.com/ 。

2、使用本教程官網提供的CDN（推薦）： 

<!-- css 文件 -->
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">

<!-- jQuery 库 -->
<script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

本站靜態CDN 基於阿里雲服務。

NoteFoundation使用CDN的優勢:
Foundation 使用CDN 提高了企業站點(尤其含有大量圖片和靜態頁面站點)的訪問速度，並大大提高以上性質站點的穩定性

為什麼使用modernizr?
Some Foundation 的組件使用了比較前前沿的HTML5 和CSS3 特性，但不是所有瀏覽器都支持。 Modernizr 是一個用於檢測用戶瀏覽器HTML5和CSS3特性的JavaScript庫- 讓組件能在所有瀏覽器上正常運行。

使用Foundation 創建頁面

1.添加HTML5 doctype

Foundation 使用HTML 元素和CSS 屬性，所以需要添加HTML5 doctype 文檔類型聲明。

同時我們可以設置文檔的語言屬性lang 及字符編碼：

< !DOCTYPE html >
< html lang= "zh-cn" >
< head >
< meta charset= "utf-8" >
< /head >
< /html >

2. Foundation 5移動優先

Foundation 5 為移動設備的響應式設計。 框架的核心是移動優先。

為了確保頁面可自由縮放可以在<head>元素中添加以下<meta>標籤:

< meta name= "viewport" content= "width=device-width, initial-scale=1" >
  • width：控制viewport 的大小，可以指定的一個值，如果600，或者特殊的值，如device-width 為設備的寬度（單位為縮放為100% 時的CSS 的像素）。
  • initial-scale：初始縮放比例，也即是當頁面第一次load 的時候縮放比例。

3.初始化組件

一些Foundation 組件是基於jQuery 開放的，如：模態框、下拉菜單等。 你可以使用以下腳本來初始化組件：

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

基本Foundation 頁面

如何創建一個基本的foundation 頁面: 

<!DOCTYPE html>
<html>
<head>
  <title>Foundation Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- css 文件 -->
  <link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body>
 
<div class="row">
  <div class="medium-12 columns">
    <div class="panel">
      <h1>Foundation 页面</h1>
      <p>重置窗口大小，查看效果！</p>
      <button type="button" class="button small">I Like It!</button>
    </div>
  </div>
</div>

<div class="row">
  <div class="medium-4 columns">
    <h3>Column 1</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 2</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
  <div class="medium-4 columns">
    <h3>Column 3</h3>
    <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p>
  </div>
</div>

</body>
</html>

嘗試一下»