Foundation是一个用于快速开发的免费前端框架。

Foundation包括HTML和CSS设计模板，并提供了各种Web上的UI组件，例如表单、按钮、选项卡等。还提供了各种JavaScript插件。

Foundation 是移动优先的，用于创建响应式网页。

基础课程适合初学者和专业人士。

Foundation已被Facebook、eBay、三星、亚马逊、迪士尼等使用。

哪里可以下载基础？

您可以通过以下两种方式获得基础：

1.从官网下载最新版本：http://foundation.zurb.com/。

2.使用提供的CDN（推荐）：

!– css 文件– link rel=\’stylesheet\’ href=\’http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css\’ !– jQuery 库– script src=\’http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js\’/script !– JavaScript 文件– 脚本src=\’http://cdn.static.runoob.com/libs/foundation/5.5。 3/js/foundation.min.js\’/script !–modernizr.js文件–脚本src=\’http://cdn.static.runoob.com/libs/foundation/5.5.3/js/vendor/modernizr.js\’/script 本站的静态CDN基于阿里云服务。

使用Foundation 创建页面

1. 添加HTML5 文档类型

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

!DOCTYPE html

html lang=\’zh-cn\’

头

元字符集=\’utf-8\’

/头

/html

2. Foundation 5 移动优先

Foundation 5 专为移动设备而设计。该框架的核心是移动优先。

为了保证页面可以自由缩放，可以在head元素中添加如下meta标签：

元名称=\’视口\’内容=\’宽度=设备宽度，初始比例=1\’

宽度：控制视口的大小。您可以指定一个值，例如600，也可以指定一个特殊值，例如device-width，它是设备的宽度（单位是缩放到100% 时的CSS 像素）。

initial-scale：初始缩放比例，即页面第一次加载时的缩放比例。

3. 初始化组件

一些Foundation组件是基于jQuery开放的，比如模态框、下拉菜单等，可以使用下面的脚本来初始化组件：

脚本

$(文档).ready(函数() {

$(文档).foundation();

})

/脚本

基础基础页面

如何创建基本基础页面：

基础实例

div class=\’row\’ div class=\’medium-12 columns\’ div class=\’panel\’ h1Foundation page/h1 p重置窗口大小，看看效果！ /p 按钮type=\’按钮\’ class=\’按钮小\’我是一个按钮！/button /div /div /div div class=\’row\’ div class=\’medium-4 columns\’ h3/h3 p 学到的不仅仅是科技，更是梦想！ /p /div div class=\’medium-4 columns\’ h3/h3 p 我学到的不仅仅是技术，更是梦想！ /p /div div class=\’medium-4 columns\’ h3/h3 p 我学到的不仅仅是技术，更是梦想！ /p /div /div

什么是响应式网页设计？

响应式Web设计的理念是页面的设计和开发应根据用户行为和设备环境（系统平台、屏幕尺寸、屏幕方向等）做出相应的响应和调整。

使用CDN: 的基础优势

基金会利用CDN来提高企业网站（特别是含有大量图片和静态页面的网站）的访问速度，并大大提高了上述性质网站的稳定性。

为什么使用现代化？