强大又简单的响应式框架——Foundation 网格系统
前端框架——Foundation
Foundation 用于开发响应式的 HTML, CSS and JavaScript 框架。
Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。
Foundation 是一个以移动优先的流行框架。
号称自己是目前网络社区内应用范围最广的前端开发框架之一,当然说到之一,那么
就不是唯一,与foundation相似的一款框架我想大家都知道,那就是号称自己是
简洁、直观、强悍的前端开发框架 Bootstrap框架。下面我会给大家针对两款框架做一些
详细的对比。
Foundation vs
Bootstrap
简单的介绍过了Bootstrap,今天就和大家一起学习一下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的网格系统与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-num
, medium-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 网格系统的更多相关文章
- 15个最好的HTML5前端响应式框架(2014)
文中的多个框架基于SASS创建,SCSS是一种比LESS更简洁的样式表编程语言,它能够编绎成CSS,可复用CSS代码,声明变量,甚至是函数,类Ruby/Python的语法.參见: LESS vs SA ...
- 【响应式】foundation栅格布局的“尝鲜”与“填坑”
提到响应式,就不得不提两个响应式框架--bootstrap和foundation.在标题上我已经说明白啦,今天给大家介绍的是foundation框架. 何为"尝鲜"?就是带大伙 ...
- 美团客户端响应式框架EasyReact开源啦
前言 EasyReact 是一款基于响应式编程范式的客户端开发框架,开发者可以使用此框架轻松地解决客户端的异步问题. 目前 EasyReact 已在美团和大众点评客户端的部分业务中进行了实践,并且持续 ...
- Crumpet – 使用很简单的响应式前端开发框架
Crumpet 是一个简单的响应式的基于 SASS/SCSS 的响应式前端框架,保持你的 HTML 代码简洁.内置尽量使用占位符选择器,以减少你的 HTML 标记的大小,没有凌乱的 HTML 代码.快 ...
- 一个响应式框架——agera
Google在上周开源了一个响应式框架——agera,相信它会慢慢地被广大程序员所熟知.我个人对这样的技术是很感兴趣的,在这之前也研究过RxJava,所以在得知Google开源了这样的框架之后第一时间 ...
- 创建简单的响应式HTML5模版
创建简单的响应式HTML5模版 HTML5目前发展势头良好,已经逐渐得到大部分浏览器不同程度的支持.许多web开发者也已经学习到了不少关于HTML 5的基础知识并开始试图使用HTML 5制作网页.与此 ...
- Notyf - 超级简单、响应式的 JS 通知插件
通知是网站的常用功能之一,可以用来显示消息.通告.提示等等.Notyf 是一款超级简单.响应式的 JS 通知插件,不依赖 jQuery 库,可以独立使用.赶紧试用一下吧! 在线演示 免费下载 ...
- .NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
netnrf 响应式框架 用于快速开发的响应式框架 演示:https://rf2.netnr.com v3.x 前端采用 jQuery + Bootstrap + EasyUI + AceAdmin ...
- Web移动前端开发-——bootstarp响应式框架
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 小于768的为超小屏幕 ...
随机推荐
- 【2016美团】浏览器和服务器在基于https进行请求链接到数据传输过程中,用到了如下哪些技术
A.非对称加密技术 B.对称加密技术 C.散列(哈希)算法 D.数字证书 答案:ABCD HTTPS在传输数据之前需要客户端(浏览器)与服务端(网站)之间进行一次握手,在握手过程中将确立双方加密传输数 ...
- JS表单提交的几种方式
第一种方式 : 表单提交,在 form 标签中增加 onsubmit 事件来判断表单是否提交成功 <script type="text/javascript"> fun ...
- ThinkJS框架入门详细教程(二)新手入门项目
一.准备工作 参考前一篇:ThinkJS框架入门详细教程(一)开发环境 安装thinkJS命令 npm install -g think-cli 监测是否安装成功 thinkjs -v 二.创建项目 ...
- There is no getter for property named xxx' in 'class java.lang.xxx'
在xxxMapper.xml我们使用sql片段来提高sql代码的复用性,当时新手传入参数时常常出现这样的错误: There is no getter for property named xxx' i ...
- 用html+css+js做打地鼠小游戏
html 代码 first.html <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- python重试(指数退避算法)
本文实现了一个重试的装饰器,并且使用了指数退避算法.指数退避算法实现还是很简单的.先上代码再详细解释. 1.指数退避算法 欠奉.http://hugnew.com/?p=814 2.重试装饰器retr ...
- 51nod 1510 最小化序列 | DP 贪心
题目描述 现在有一个长度为n的数组A,另外还有一个整数k.数组下标从1开始. 现在你需要把数组的顺序重新排列一下使得下面这个的式子的值尽可能小. ∑|A[i]−A[i+k]| 特别的,你也可以不对数组 ...
- 浅谈python 复制(深拷贝,浅拷贝)
博客参考:点击这里 python中对象的复制以及浅拷贝,深拷贝是存在差异的,这儿我们主要以可变变量来演示,不可变变量则不存在赋值/拷贝上的问题(下文会有解释),具体差异如下文所示 1.赋值: a=[1 ...
- LINUX 配置默认程序
update-alternatives 命令用于配置默认程序,版本切换 1.display 命令,查看命令链接信息 update-alternatives --display name 2.insta ...