请选择 进入手机版 | 继续访问电脑版
  • 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Foundation 起步

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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、从官网下载最新版本:http://foundation.zurb.com/

2、使用W3Cschool在线教程官网提供的CDN(推荐):

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

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

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

<!-- modernizr 文件 -->
<script src="http://statics.ogeek.cn/assets/foundation-5.5.3/js/vendor/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://statics.ogeek.cn/assets/foundation-5.5.3/foundation.min.css">

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

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

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

尝试一下 »


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Foundation 文本发布时间:2022-01-31
下一篇:
Foundation 教程发布时间:2022-01-31
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap