阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Foundation 起步

      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、使用CDN(推荐):https://www.bootcdn.cn/foundation/

      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 为移动设备的响应式设计。框架的核心是移动优先。

      为了确保页面可自由缩放可以在 元素中添加以下 标签:

      <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 页面:

      Foundation 实例

      <div class="row">
        <div class="medium-12 columns">
          <div class="panel">
            <h1>Foundation 页面</h1>
            <p>重置窗口大小,查看效果!</p>
            <button type="button" class="button small">我是按钮!</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>
      
      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      目录