网页前端开发响应式 Web UI框架Foundation vs bootstrap区别 差别 不同

Foundation为前端响应式 Web UI 框架之一,是一款简洁、直观、强悍的开源前端开发框架,它让Web开发更迅速,能快速创建页面原型。相比同类型前端UI,Foundation编码少、性能好、兼容性更强的特点。

【组件价值】

  • 有效降低前端开发难度
  • 快速提升前端开发效率
  • 降低前端开发风险

【组件功能】

SN 功能点 备注说明
1 网格 支持在任何设备上按顺序偏移,这将使布局变得很简单!
2 排版 基于一个黄金比例的模块,它可以很方便的更新Scss或者定制我们的CSS
3 按钮 按钮是网络的一个核心交互式元件。我们已经包含了用于创建简单应用程序的工具栏风格
4 导航栏 通常人们会在网页上通过导航栏查看页面。而在Foundation的导航栏风格中包含一个复杂顶部导航栏,以及支持3级下拉的简单导航栏、侧边栏和子导航
5 表单 内置的基础网格,您可以快速的创建简单或复杂的表单,并且很容易验证自定义选项,单选按钮等。
6 UI元素 我们还有很多有用的元素类如:visibility(隐藏或显示基于屏幕的大小或方向的东西)、labels、alerts、tooltips、panels等
7 Magellan 灵活的跟随屏幕移动并能识别位置的导航条,你只需要设置好tag位置或将其关闭。
8 Joyride 这个插件可以让你您的网站把您的应用程序显示给用户,Joyride可以轻松地自定义使用CSS或SCSS变量
9 Clearing幻灯 使用简单的无序列表就可以打造可心的全屏幻灯内容了。
7 选项卡 Section无论是整个页面或简单的选项卡的内容,都可以使用基础标签完成。不仅美观而且交互性很强
8 幻灯 一个强大的图像、内容的幻灯片显示插件,其中常用的选项包括:such as   timers, paddles, bullet thumbs等
9 弹出层 Reveal弹出层:您可以很容易地调用Reveal弹出层,实现跨设备支持
10 Tips工具 tooltips可以让你快速添加hover、click等事件的tips元素。
11 下拉菜单 我们已经制作了一个下拉菜单插件,可以很容易地将弹出层下拉到网页上的任何位置

【源码说明】

Foundation
 ├ css 存储样式文件的目录
 │ ├foundation.css foundation样式文件
│ ├f oundation.min.css 压缩文件
│ ├normalize.css 保留浏览器的原来样式并且做到每个浏览显示一致。讲求通用性和可维护性
 ├ js 存储foundation内置的JS库
 │ ├foundation 存储foundation封装的js组件库
│ ├vendor 扩展jquery等库,基于Jquery 2.0
foundation.min.js Foundation压缩包,便于快速加载、快速响应

【浏览器兼容性】

主要描述的是Foundation 5.x如果要兼容IE8以下,采用版本Foundation4.x或Foundation3.x,具体查看官方说明文档

 

 

 

 

Top Down