Foundation 起步

2022-08-05 15:08 更新

什么是 Foundation?

  • Foundation 是一個免費的前端框架,用于快速開發(fā)。
  • Foundation 包含了 HTML 和 CSS 的設(shè)計模板,提供多種 Web 上的 UI 組件,如表單、按鈕、Tabs 等等。同時也提供了多種 JavaScript 插件。
  • Foundation 移動優(yōu)先,可創(chuàng)建響應(yīng)式網(wǎng)頁。
  • Foundation 適用于初學(xué)者和專業(yè)人士。
  • Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。

Note  什么是響應(yīng)式網(wǎng)頁設(shè)計?

 響應(yīng)式Web設(shè)計(Responsive Web design)的理念是:頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相應(yīng)的響應(yīng)和調(diào)整。

從哪里下載 Foundation?

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

1、從官網(wǎng)下載最新版本:http://foundation.zurb.com/。

2、使用W3Cschool在線教程官網(wǎng)提供的CDN(推薦):

<!-- css 文件 -->
<link rel="stylesheet" href="http://statics.w3cschool.cn/assets/foundation-5.5.3/foundation.min.css">

<!-- jQuery 庫 -->
<script src="http://statics.w3cschool.cn/assets/jquery/2.0.3/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- modernizr 文件 -->
<script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

本站靜態(tài) CDN 基于阿里云服務(wù)。

Note  Foundation 使用 CDN 的優(yōu)勢:
 Foundation 使用 CDN 提高了企業(yè)站點(尤其含有大量圖片和靜態(tài)頁面站點)的訪問速度,并大大提高以上性質(zhì)站點的穩(wěn)定性

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

使用 Foundation 創(chuàng)建頁面

1. 添加 HTML5 doctype

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

同時我們可以設(shè)置文檔的語言屬性 lang 及字符編碼:

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

2. Foundation 5 移動優(yōu)先

Foundation 5 為移動設(shè)備的響應(yīng)式設(shè)計??蚣艿暮诵氖且苿觾?yōu)先。

為了確保頁面可自由縮放可以在 <head> 元素中添加以下 <meta> 標(biāo)簽:

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

3. 初始化組件

一些 Foundation 組件是基于 jQuery 開放的,如:模態(tài)框、下拉菜單等。你可以使用以下腳本來初始化組件:

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

基本 Foundation 頁面

如何創(chuàng)建一個基本的 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://statics.w3cschool.cn/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 庫 -->
  <script src="http://statics.w3cschool.cn/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://statics.w3cschool.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://statics.w3cschool.cn/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>

嘗試一下 ?

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號