前端框架——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文本与默认浏览器样式对比。

        <h1>foundation</h1>
<h2>foundation</h2>
<h3>foundation</h3>
<h4>foundation</h4>
<h5>foundation</h5>
<h6>foundation</h6>

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

    

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

     <h1 class="subheader">subheader</h1>
<h2>foundation</h2>
<h3 class="subheader">subheader</h3>
<h4>foundation</h4>
<h5 class="subheader">subheader</h5>
<h6>foundation</h6>

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

       <h1 class="subheader">subheader
<small>small</small>
</h1>
<h2>foundation
<small>small</small>
</h2>
<h3 class="subheader">subheader
<small>small</small>
</h3>
<h4>foundation
<small>small</small>
</h4>
<h5 class="subheader">subheader
<small>small</small>
</h5>
<h6>foundation
<small>small</small>
</h6>

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

Foundation的网格系统

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

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

    <nav class="top-bar" data-topbar>
  <ul class="title-area">
   <li class="name">
<!-- 如果你不需要标题或图标可以删掉它 -->
<h1><a href="#">顶部导航响应</a></h1>
</li>
<!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类,可以去除图标。
如果需要只显示图片,可以删除 "Menu" 文本 -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul> <section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page </a></li>
<li><a href="#">Page </a></li>
<li><a href="#">Page </a></li>
</ul>
</section>
</nav> <!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>

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

<div class="row">
...
</div>

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

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

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

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

<div class="row">
<div class="small-3 columns" style="background-color:darksalmon;">
<p>小型设备 %</p>
</div>
<div class="small-9 columns" style="background-color:mediumvioletred;">
<p>小型设备75%</p>
</div>
</div>

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

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

<div class="row">
<div class="small-3 medium-6 columns" style="background-color:yellow;">
<p>中型设备</p>
</div>
<div class="small-9 medium-6 columns" style="background-color:pink;">
<p>中型设备</p>
</div> <div class="small-3 medium-6 columns" style="background-color:cadetblue;">
<p>中型设备</p>
</div>
<div class="small-9 medium-6 columns" style="background-color:saddlebrown;">
<p>中型设备</p>
</div>
</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)

         

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

⊙foundation 块状网格

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

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

⊙Foundation 网格实例

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

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

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

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

<style type="text/css">
div{
border-bottom: 1px solid white;
}
</style>
<body> <!--三个均等列-->
<div class="row">
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>.medium-</p>
</div>
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-</p>
</div>
</div>
<!-- 三个不均等列-->
<div class="row">
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-</p>
</div>
<div class="medium-6 columns" style="background-color:pink;">
<p>.medium-</p>
</div>
<div class="medium-3 columns" style="background-color:yellow;">
<p>.medium-</p>
</div>
</div>
<!--两个均等列-->
<div class="row">
<div class="small-8 columns" style="background-color:yellow;">
<p>.small-</p>
</div>
<div class="small-4 columns" style="background-color:pink;">
<p>.small-</p>
</div>
</div>
<!--修改列顺序-->
<div class="row">
<div class="small-4 small-8-push columns" style="background-color:yellow;">
<p>.small- .small--push</p>
</div>
<div class="small-8 small-4-pull columns" style="background-color:pink;">
<p>.small- .small--pull</p>
</div>
</div> </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. HIVE---基于Hadoop的数据仓库工具讲解

    Hadoop: Hadoop是一个由Apache基金会所开发的分布式系统基础架构.用来开发分布式程序.充分利用集群的威力进行高速运算和存储.Hadoop实现了一个分布式文件系统(Hadoop Dist ...

  2. Docker到底是什么

    简单讲docker和vm虚拟机类似,都是在同一硬件上虚拟化出多个服务器应用实例的功能,据Bottomley声称,借助经过全面调优的容器系统,你就可以在同一硬件上拥有数量比使用Xen虚拟机或KVM虚拟机 ...

  3. EXISTS/NOT EXISTS CASE WHEN等使用方法

    --简单判断用法 WHERE EXISTS (SELECT * FROM cpay..System_Setting) --可以替换count ) FROM cpay..System_Setting U ...

  4. Nginx 1.10.1 版本nginx.conf优化配置及详细注释

    Nginx 1.10.1 的nginx.conf文件,是调优后的,可以拿来用,有一些设置无效,我备注上了,不知道是不是版本的问题,回头查一下再更正. #普通配置 #==性能配置 #运行用户 user ...

  5. Working with Python subprocess - Shells, Processes, Streams, Pipes, Redirects

    Posted: 2009-04-28 15:20 Tags: Python Note Much of the "What Happens When you Execute a Command ...

  6. BZOJ-5055-膜法师(离散化+树状数组)

    Description 在经历过1e9次大型战争后的宇宙中现在还剩下n个完美维度, 现在来自多元宇宙的膜法师,想偷取其中的三个维度为伟大的长者续秒, 显然,他能为长者所续的时间,为这三个维度上能量的乘 ...

  7. HDU1305 Immediate Decodability(水题字典树)

    巧了,昨天刚刚写了个字典树,手到擒来,233. Problem Description An encoding of a set of symbols is said to be immediatel ...

  8. Java简单工厂模式以及来自lambda的优化

    前言    设计模式是软件工程中一些问题的统一解决方案的模型,它的出现是为了解决一些普遍存在的,却不能被语言特性直接解决的问题,随着软件工程的发展,设计模式也会不断的进行更新,本文介绍的是经典设计模式 ...

  9. bind、apply与call

    bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...

  10. 解决网络通信中外网和内网之间的通信问题(NAT转换)

    本文原址 http://www.cnblogs.com/lidabo/p/3828846.html 在网络编码中会发现程序在局域网中是可以适用的,但是在外网与内网之间和内网与内网之间就不可行.问题就在 ...