2019-11-12

Foundation 基础知识

前言

Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。
Foundation 官网
Foundation5 教程

1、Foundation

Foundation 是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用。
Foundation 是一个以移动优先的流行框架，可创建响应式网页。
Foundation 包含了 HTML 和 CSS 的设计模板，提供多种 Web 上的 UI 组件，如表单、按钮、Tabs 等等。同时也提供了多种 JavaScript 插件。
Foundation 已使用在 Facebook, eBay, Samsung, Amazon, Disney 等。
相关网站：

1.1 响应式 Web 设计

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

1.2 特性

按钮
表格
图片弹窗
警告
网格
进度条
面板
下拉菜单
手风琴效果
顶部导航
模态框
开关
滑块

2、安装

可以通过以下两种方式来安装 Foundation：
- 使用 Foundation CDN。
- 从官网下载 Foundation。

2.1 使用 CDN

在 HTML 页面的 <head> 部分中添加以下行。

国内推荐使用 Staticfile CDN 上的库：

<!-- Foundation 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css" rel="stylesheet" />

<!-- jQuery 文件。务必在 foundation.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

<!-- modernizr.js 文件 -->
<script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
   
<!-- Foundation 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>

海外推荐 cdnjs 上的库：

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/css/foundation.min.css" rel="stylesheet" />

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.3/js/vendor/modernizr.js"></script>

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

Some Foundation 的组件使用了比较前前沿的 HTML5 和 CSS3 特性，但不是所有浏览器都支持。Modernizr 是一个用于检测用户浏览器 HTML5 和 CSS3 特性的 JavaScript 库 - 让组件能在所有浏览器上正常运行。

2.2 直接下载到本地

下载地址：
- Foundation 官网
复制整个 Foundation 文件夹到项目中。

在 HTML 的 <head> 中引用 foundation.min.css。

1
2
3

<link href="path/to/foundation.min.css" rel="stylesheet" />

<link href="path/to/foundation.min.js" rel="stylesheet" />

3、使用

3.1 添加 HTML5 doctype

Foundation 使用 HTML 元素和 CSS 属性，所以需要添加 HTML5 doctype 文档类型声明。

同时可以设置文档的语言属性 lang 及字符编码：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
</head>

</html>

3.2 移动设备优先

Foundation5 为移动设备的响应式设计。框架的核心是移动优先。
为了确保页面可自由缩放可以在 <head> 元素中添加以下 <meta> 标签:
1
<meta name="viewport" content="width=device-width, initial-scale=1" />
width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

3.3 初始化组件

一些 Foundation 组件是基于 jQuery 开发的，如：模态框、下拉菜单等。可以使用以下脚本来初始化组件：
1
2
3
4
5
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>

3.4 模板

一个使用了 Foundation 的基本的 HTML 模板如下所示。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Foundation 模板</title>

    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Foundation 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css" rel="stylesheet" />

    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5 元素和媒体查询 -->
    <!-- 注意：如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <h1>Hello, world!</h1>

    <!-- JavaScript 放置在文档最后面可以使页面加载速度更快 -->

    <!-- 可选: jQuery 文件。务必在 foundation.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <!-- modernizr.js 文件 -->
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>

    <!-- 可选: Foundation 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
</body>

</html>

可以看到包含了 jquery.js、foundation.min.js 和 foundation.min.css 文件，用于让一个常规的 HTML 文件变为使用了 Foundation 的模板。

3.5 实例

实例

<head>
    <meta charset="utf-8" />
    <title>Qian Chia 工作室</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://cdn.staticfile.org/foundation/5.5.3/css/foundation.min.css" rel="stylesheet" />
    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/foundation.min.js"></script>
    <script src="https://cdn.staticfile.org/foundation/5.5.3/js/vendor/modernizr.js"></script>
</head>

<div class="row">
    <div class="medium-12 columns">
        <div class="panel">
            <h1>Foundation 页面</h1>
            <p>重置窗口大小，查看效果！</p>
        </div>
    </div>
</div>

<div class="row">
    <div class="medium-4 columns">
        <h3>Qian Chia 工作室</h3>
        <p>学的不仅是技术，更是梦想！！！</p>
    </div>
    <div class="medium-4 columns">
        <h3>Qian Chia 工作室</h3>
        <p>学的不仅是技术，更是梦想！！！</p>
    </div>
    <div class="medium-4 columns">
        <h3>Qian Chia 工作室</h3>
        <p>学的不仅是技术，更是梦想！！！</p>
    </div>
</div>

效果 🔗

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:01

Qian Chia's Blog

赞助

搜索

分类

标签