Foundation 基础知识

前言

  • Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。

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 上的库:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- 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 上的库:

    1
    2
    3
    4
    5
    6
    7
    <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 文件夹到项目中。

  • 在 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 及字符编码:

    1
    2
    3
    4
    5
    6
    7
    8
    <!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 模板如下所示。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    <!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 实例

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <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>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    <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>
  • 效果 🔗

文章目录
  1. 1. 前言
  2. 2. 1、Foundation
    1. 2.1. 1.1 响应式 Web 设计
    2. 2.2. 1.2 特性
  3. 3. 2、安装
    1. 3.1. 2.1 使用 CDN
    2. 3.2. 2.2 直接下载到本地
  4. 4. 3、使用
    1. 4.1. 3.1 添加 HTML5 doctype
    2. 4.2. 3.2 移动设备优先
    3. 4.3. 3.3 初始化组件
    4. 4.4. 3.4 模板
    5. 4.5. 3.5 实例
隐藏目录