前端框架——Foundation

 
 
简介

     Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。          

     Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。

        Foundation 是一个以移动优先的流行框架。

  号称自己是目前网络社区内应用范围最广的前端开发框架之一,当然说到之一,那么

就不是唯一,与foundation相似的一款框架我想大家都知道,那就是号称自己是

简洁、直观、强悍的前端开发框架 Bootstrap框架。下面我会给大家针对两款框架做一些

详细的对比。

 
 
 

Foundation   vs

Bootstrap

 

 

Foundation   : 是在国外比较流行在国内的使用就比较少,在兼容上Foundation在
  Foundation4就已经放弃了IE8的支持这点可能也是在国内使用者少的原因之一,Foundation
  在js库中使用的是Zepto(就是轻量级的JQuery) Foundation4就已经把mobile first放在
  首要开发。 
Bootstrap  : 当然这款框架在国内是非常流行,兼容性上仍然支持IE8更是通过bs-ie的
  方式来达到大部分component支持IE 6的要求,这是其一,其二呢就是他简单 好学容易上手这点毋庸置疑,(被外国程序员称为懒人框架)他在JS库中使用的完全是JQuery来操作,也同时拥有响应式布局的删格系统这也是大部分程序员喜欢的地方之一。
两款框架都有自己的优点,希望联系自己的需要来进行选择。
 

 

简单的介绍过了Bootstrap,今天就和大家一起学习一下Foundation   虽然两款框架相似,但总用不一样的地方,难免会喜欢上他的不一样的地方

一、Foundation   文本

⊙下载地址:https://foundation.zurb.com/sites/download.html/

⊙导入css代码

⊙ Foundation   h1-h6文本与默认浏览器样式对比。

  1. <h1>foundation</h1>
  2. <h2>foundation</h2>
  3. <h3>foundation</h3>
  4. <h4>foundation</h4>
  5. <h5>foundation</h5>
  6. <h6>foundation</h6>

默认浏览器样式:            Foundation 文本样式:

    

一个浅色的标题给标签添加.subheader 类:

  1.      <h1 class="subheader">subheader</h1>
  2. <h2>foundation</h2>
  3. <h3 class="subheader">subheader</h3>
  4. <h4>foundation</h4>
  5. <h5 class="subheader">subheader</h5>
  6. <h6>foundation</h6>

添加一个small副标题的样式:

  1. <h1 class="subheader">subheader
  2. <small>small</small>
  3. </h1>
  4. <h2>foundation
  5. <small>small</small>
  6. </h2>
  7. <h3 class="subheader">subheader
  8. <small>small</small>
  9. </h3>
  10. <h4>foundation
  11. <small>small</small>
  12. </h4>
  13. <h5 class="subheader">subheader
  14. <small>small</small>
  15. </h5>
  16. <h6>foundation
  17. <small>small</small>
  18. </h6>

文本样式每个框架都不一样,可以根据帮助文档来进行更多的对比!

Foundation的网格系统

⊙Foundation的网格系统与Bootstrap的栅格系统及其相似都是分为12列根据屏幕或设备的大小
  ——Foundation有三个列
        .small(手机端)
        .medium (平板设备)
        .large (电脑设备)

⊙他的导航条也与Bootstrap的相似下面给大家先展示一下他的响应式

  1. <nav class="top-bar" data-topbar>
  2.   <ul class="title-area">
  3.    <li class="name">
  4. <!-- 如果你不需要标题或图标可以删掉它 -->
  5. <h1><a href="#">顶部导航响应</a></h1>
  6. </li>
  7. <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类,可以去除图标。
  8. 如果需要只显示图片,可以删除 "Menu" 文本 -->
  9. <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
  10. </ul>
  11.  
  12. <section class="top-bar-section">
  13. <ul class="left">
  14. <li class="active"><a href="#">Home</a></li>
  15. <li><a href="#">Page </a></li>
  16. <li><a href="#">Page </a></li>
  17. <li><a href="#">Page </a></li>
  18. </ul>
  19. </section>
  20. </nav>
  21.  
  22. <!-- 初始化 Foundation JS -->
  23. <script>
  24. $(document).ready(function() {
  25. $(document).foundation();
  26. })
  27. </script>

⊙网格系统,首先创建一行<div class = "row">这是一行水平的垂直列然后添加列的数量说明 small-nummedium-num 及 large-num类。注意:列的数量 num 加起来必须等于 12 :

  1. <div class="row">
  2. ...
  3. </div>

⊙Foundation  网格 - 水平叠堆
    解释:大屏幕  pc上的显示为水平平铺的,小型设备,或缩小屏幕 显示为垂直叠堆的。

  1. <div class="row">
  2. <div class="medium-6 columns" style="background-color:chartreuse;">网格叠堆</div>
  3. <div class="medium-6 columns" style="background-color:orangered;">网格叠堆</div>
  4. </div>

⊙Foundation  网格 - 小型设备(手机)

    解释:以下实例设置了两个列,比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明,在大型设备上会继承 .small 类的代码)。

  1. <div class="row">
  2. <div class="small-3 columns" style="background-color:darksalmon;">
  3. <p>小型设备 %</p>
  4. </div>
  5. <div class="small-9 columns" style="background-color:mediumvioletred;">
  6. <p>小型设备75%</p>
  7. </div>
  8. </div>

⊙Foundation  网格 - 中型设备(平板)

    解释:以下实例中我们指定了 .medium-6 类 (不是 .small-*)。这表明在中型或大型设备上比例为 50%/50%。但在小型设备上会水平堆叠 (100% 宽度):

  1. <div class="row">
  2. <div class="small-3 medium-6 columns" style="background-color:yellow;">
  3. <p>中型设备</p>
  4. </div>
  5. <div class="small-9 medium-6 columns" style="background-color:pink;">
  6. <p>中型设备</p>
  7. </div>
  8.  
  9. <div class="small-3 medium-6 columns" style="background-color:cadetblue;">
  10. <p>中型设备</p>
  11. </div>
  12. <div class="small-9 medium-6 columns" style="background-color:saddlebrown;">
  13. <p>中型设备</p>
  14. </div>
  15. </div>

⊙Foundation  网格 - 大型设备(电脑)

     解释:以下实例中我们指定了 .large-6 类 (不是 .medium-* 和 .small-*)。这表明在大型设备上比例为 50%/50%。但在中型或小型设备上会水平堆叠 (100% 宽度)。

      解析:小型设备两个列的比例为 25%/75% (.small-3 和 .small-9)

          中型设备两个列的比例为 50%/50% (.medium-6 和 .medium-6)

          大型设备两个列的比例为 33%/66% (.large-4 和 .large-8)

         

  1. <div class="row">
  2. <div class="small-3 medium-6 large-4 columns" style="background-color:yellow;">
  3. <p>大型设备</p>
  4. </div>
  5. <div class="small-9 medium-6 large-8 columns" style="background-color:pink;">
  6. <p>大型设备</p>
  7. </div>
  8. </div>

⊙foundation 块状网格

    解释:块状网格用来均分页面内容例如一行内要显示几张图片,不管什么屏幕下都需要均分宽度。可以使用 <ul> 元素加上 .small|medium|large-block-grid-num 类来创建块状网格。num 用于指定均分是数量:

  1. <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4" style="float: left;">
  2. <li><img src="img/img.gif" style="width: 200px;height: 100px;" ></li>
  3. <li><img src="img/img2.gif"style="width: 200px;height: 100px;" ></li>
  4. <li><img src="img/img3.gif"style="width: 200px;height: 100px;"></li>
  5. <li><img src="img/img5.gif"style="width: 200px;height: 100px;"></li>
  6. <li><img src="img/img3.gif"style="width: 200px;height: 100px;" ></li>
  7. <li><img src="img/img2.gif"style="width: 200px;height: 100px;" ></li>
  8. </ul>

⊙Foundation 网格实例

    解释:创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠

       创建三个不均等列 (25%/50%/25%),在中型和大型设备上显示三个列,在小型设备上自动堆叠

       创建两个均等列 (50%/50%),在小型、中型和大型设备上列的比例始终为 50%/50%

       等等就不给大家一一解释了 可以根据帮助文档进行了解更多

  1. <style type="text/css">
  2. div{
  3. border-bottom: 1px solid white;
  4. }
  5. </style>
  6. <body>
  7.  
  8. <!--三个均等列-->
  9. <div class="row">
  10. <div class="medium-3 columns" style="background-color:yellow;">
  11. <p>.medium-</p>
  12. </div>
  13. <div class="medium-6 columns" style="background-color:pink;">
  14. <p>.medium-</p>
  15. </div>
  16. <div class="medium-3 columns" style="background-color:yellow;">
  17. <p>.medium-</p>
  18. </div>
  19. </div>
  20. <!-- 三个不均等列-->
  21. <div class="row">
  22. <div class="medium-3 columns" style="background-color:yellow;">
  23. <p>.medium-</p>
  24. </div>
  25. <div class="medium-6 columns" style="background-color:pink;">
  26. <p>.medium-</p>
  27. </div>
  28. <div class="medium-3 columns" style="background-color:yellow;">
  29. <p>.medium-</p>
  30. </div>
  31. </div>
  32. <!--两个均等列-->
  33. <div class="row">
  34. <div class="small-8 columns" style="background-color:yellow;">
  35. <p>.small-</p>
  36. </div>
  37. <div class="small-4 columns" style="background-color:pink;">
  38. <p>.small-</p>
  39. </div>
  40. </div>
  41. <!--修改列顺序-->
  42. <div class="row">
  43. <div class="small-4 small-8-push columns" style="background-color:yellow;">
  44. <p>.small- .small--push</p>
  45. </div>
  46. <div class="small-8 small-4-pull columns" style="background-color:pink;">
  47. <p>.small- .small--pull</p>
  48. </div>
  49. </div>
  50.  
  51. </body>
 
 

分享结束

 

 

 
两框不同的框架有着不同的东西也有这相似之处,这种框架有好多大体都很相似,我们追求的是强大和方便,框架不断的完善,我们不断的学习。
 

强大又简单的响应式框架——Foundation 网格系统的更多相关文章

  1. 15个最好的HTML5前端响应式框架(2014)

    文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...

  2. 【响应式】foundation栅格布局的“尝鲜”与“填坑”

      提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...

  3. 美团客户端响应式框架EasyReact开源啦

    前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题. 目前 EasyReact 已在美团和大众点评客户端的部分业务中进行了实践,并且持续 ...

  4. Crumpet – 使用很简单的响应式前端开发框架

    Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...

  5. 一个响应式框架——agera

    Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...

  6. 创建简单的响应式HTML5模版

    创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...

  7. Notyf - 超级简单、响应式的 JS 通知插件

    通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示      免费下载 ...

  8. .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单

    netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...

  9. Web移动前端开发-——bootstarp响应式框架

    移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕 ...

随机推荐

  1. Javascript 中 ==(相等运算符) 和 ===(严格相等运算符) 区别

    在JS中,"==="叫做严格运算符,"=="叫做相等运算符. 它们的区别是相等运算符(==)比较两个值是否相等,严格相等运算符(===)比较它们是否为" ...

  2. An Introduction to Variational Methods (5.3)

    从之前的文章中,我们已经得到了所有需要求解的参数的优化分布的形式,分别为: ‍ 但是,我们从这些分布的表达式中(参见之前的文章),可以发现这些式子并不能够直接求解.这是因为各个参数之间相互耦合,从而导 ...

  3. PHP计算上个月的开始时间和结束时间戳

    $m = date('Y-m-d', mktime(0,0,0,date('m')-1,1,date('Y'))); $t = date('t',strtotime($m)); //上个月共多少天 $ ...

  4. 简单Elixir游戏服务器-安装Elixir

    用WebInstaller 安装半天也没下载成功文件. 改成直接下载erlang 和 elixir 预编译包了. 安装很简单,最后设置好环境变量. cmd 执行 elixir -v 最后顺便下载了个g ...

  5. eclipse的插件开发-启动时间

    今天晚上看<深入理解java虚拟机>时,作者在书中有一段,eclipse优化的章节,其中涉及到了eclipse启动时间检测的插件开发 于是翻了翻资料,也开发了一个自己的插件 如图是开发后启 ...

  6. 有人提了一个问题:一定要RESTful吗?

    写在前面的话 这个问题看起来就显得有些萌,或者说类似的问题都有些不靠谱,世上哪有那么多一定的事情,做开发都不一定做多久呢,所以说如果你有这个疑问的话是真真有点儿不着调,不过可能也就是随口一问吧,没有深 ...

  7. CSS盒子模型之详解

    前言:        盒子模型是css中最核心的基础知识,理解了这个重要的概念才能更好的排版,进行页面布局.一.css盒子模型概念    CSS盒子模型 又称框模型 (Box Model) ,包含了元 ...

  8. 学习flex布局(弹性布局)

    Flex是Flexible Box的缩写,意为弹性布局.是W3C早期提出的一个新的布局方案.可以便捷的实现页面布局,目前较高版本的主流浏览器都能兼容,兼容情况如下: Flex在移动端开发上已是主流,比 ...

  9. Caused by: java.lang.IllegalArgumentException: 'dataSource' or 'jdbcTemplate' is required

    概述 看到异常 一般就知道 在使用JdbcTemplate 需要购入数据源, 购入数据源的方式有两种,一种是xml 配置 在DAO层注入数据源, 另一种是在xml 中 配置模版JdbcTemplate ...

  10. Django之环境搭建以及初始配置

    Django采用MVC架构,百度百科介绍如下: 全名Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业 ...