Foundation5手册
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
directory search
Foundation 基础 Foundation 教程 Foundation 安装 Foundation 按钮 Foundation 按钮组 Foundation 标签 Foundation 表单 Foundation 表格 Foundation 侧边栏 Foundation 顶部导航栏 Foundation 分页 Foundation 滑动导航 Foundation 滑块 Foundation 价格表 Foundation 进度条 Foundation 均衡器(Equalizer) Foundation 开关 Foundation 列表 Foundation 麦哲伦（Magellan）导航 Foundation Joyride Foundation 面板 Foundation 模态框 Foundation 输入框 尺寸 Foundation 提示框 Foundation 提醒框 Foundation 图标 Foundation 图片 Foundation 文本 Foundation 下拉菜单 Foundation 选项卡 Foundation 折叠列表 Foundation 手册 Foundation CSS 参考手册 Foundation CSS 可见性 Foundation 图标参考手册 Foundation 网格 Foundation 块状网格 Foundation 网格 - 大型设备 Foundation 网格 - 水平堆叠 Foundation 网格 - 小型设备 Foundation 网格 - 中型设备 Foundation 网格实例 Foundation 网格系统

©
This document uses PHP Chinese website manual Release

characters

Foundation 安装

什么是 Foundation？

  • Foundation 是一个免费的前端框架，用于快速开发。
  • Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
  • Foundation 移动优先，可创建响应式网页。
  • Foundation 适用于初学者和专业人士。
  • Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney等。


什么是响应式网页设计？

响应式Web设计(Responsive Web design)的理念是： 页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

从哪里下载 Foundation?

你可以通过以下两种方式来获取 Foundation：

1、页面下方下载最新版本。

2、使用手册网教程官网提供的CDN（推荐）：

<!-- css 文件 -->
<link rel="stylesheet" href="http://ku.shouce.ren/libs/foundation/5.5.3/foundation.min.css">
<!-- jQuery 库 -->
<script src="http://ku.shouce.ren/libs/jquery/2/jquery2.0.3.min.js"></script>
<!-- JavaScript 文件 -->
<script src="http://ku.shouce.ren/libs/foundation/5.5.3/foundation.min.js"></script>
<!-- modernizr 文件 -->
<script src="http://ku.shouce.ren/libs/foundation/5.5.3/modernizr.js"></script>

本站静态 CDN 基于阿里云服务。

Foundation 使用 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://ku.shouce.ren/libs/foundation/5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://ku.shouce.ren/libs/jquery/2/jquery2.0.3.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://ku.shouce.ren/libs/foundation/5.5.3/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://ku.shouce.ren/libs/foundation/5.5.3/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>

实例预览 »


下载

关于我们 联系我们 留言板

手册网

Previous article： Next article：