为了账号安全,请及时绑定邮箱和手机立即绑定

UI框架foundation6入门(上)

难度初级
时长 2小时44分
学习人数
综合评分9.8
13人评价 查看评价
10.0 内容实用
10.0 简洁易懂
9.4 逻辑清晰
简介:Foundation 6是一款非常流行的开源UI框架, 提供了响应式布局,一系列UI组件,包括按钮,表单,导航等多类现成的控件。适合进行快速原型和产品开发。它基于SASS的实现方式,也方便开发者进行定制化设计和扩展开发。本教程分两部分进行了详细讲解。

1章 Foundation简介

本章主要概述了Foundation框架的响应式设计应用,如何获取Foundation,以及其文件结构。同时将Foundation与其他流行的UI框架进行对比,了解Foundation适合的开发场景及其优势。
  1. 1-1 了解foundation (06:15)
  2. 1-2 搭建开发环境并开始使用foundation (10:33)

2章 布局与工具类

通过本章学习,掌握两类基本的布局形式,用于进行有效的响应式布局: grid layout: 包括列的嵌套,偏移,等分栅格,可见性控制等。 Flex Grid:包括尺寸调整,对齐,间距,偏移,元素顺序等。
  1. 2-1 了解栅格布局 (15:25)
  2. 2-2 开启Flex box模式 (17:33)
  3. 2-3 常用工具类 (11:41)
  4. 2-4 表单布局 (13:05)

3章 多媒体,导航和字体

本章课程涉及Foundation支持的多类组件的使用,包括多媒体组件(徽章Badge, 伸缩视频Flex Video,,标签Label,轮播Orbit,进度条Progress Bar,缩略图Thumbnail和提示条Tooltip等)
  1. 3-1 多媒体组件 (19:38)
  2. 3-2 导航菜单基本属性 (11:13)
  3. 3-3 多种形式的导航菜单 (13:27)
  4. 3-4 顶部导航 (12:48)
  5. 3-5 响应式导航 (11:15)
  6. 3-6 麦哲伦导航 (10:40)
  7. 3-7 分页和面包屑导航 (09:26)
课程须知
对HTML5,CSS3,JavaScript基础知识已经掌握。
老师告诉你能学到什么?
1、了解Foundation,和搭建开发环境并开始使用 Foundation 2、学习Foundation栅格布局,伸缩栅格布局,常用工具类和表单布局 3、学习多媒体组件,菜单,多种导航条组件
意见反馈 常见问题 APP下载
官方微信
hv128