强大又简单的响应式框架——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的为超小屏幕 ...
随机推荐
- 探索Java NIO
什么是NIO? java.nio全称java non-blocking IO,是指jdk1.4 及以上版本里提供的新api(New IO),NIO提供了与标准IO不同的IO工作方式. 核心部分: Ch ...
- JavaWeb(三)JSP之3个指令、6个动作、9个内置对象和4大作用域
前言 前面大概介绍了什么是JSP,今天我给大家介绍一下JSP的三个指令.6个动作以及它的9大内置对象.接下来我们就直接进入正题 一.JSP的3个指令 JSP指令(directive)是为JSP引擎而设 ...
- mysql error 1130 hy000:Host 'localhost' is not allowed to connect to this mysql server 解决方案
ERROR 1130 (HY000): Host 'localhost' is not allowed to connect to this MySQL server D:\Wamp\mysql-\b ...
- js X年X周 转成 具体日期
function getWeekDate(theyear,weekcount) { var year = theyear; var week = weekcount; if(year=="& ...
- yii2-swiftmailer入门
1. 安装 用yii 2.0框架,默认会有这个扩展 composer require --prefer-dist yiisoft/yii2-swiftmailer 修改composer.json,re ...
- Win10系统下安装Ubuntu16.04.3教程与设置
在Win10上刚刚装好Ubuntu16.04.3,装了不下于10次,期间出现很多问题,趁着还有记忆,写下这篇教程,里面还有Ubuntu系统的优化与Win10的一些设置. Part 1 制作Ubuntu ...
- Mybatis的parameterType传入多个参数
如果查询的条件有多个的时候,mybatis有三种传入方式: 1.通过注解传入 例如: public interface Mapper(){ public User login(@Param(" ...
- (@WhiteTaken)设计模式学习——代理模式
今天学习了一下代理模式,代理模式分为很多种.目前感觉有两种是需要学习一下的. 静态代理模式 动态代理模式 1. 静态代理模式 需要被代理的类,实现一个或者多个接口. 代理类需要实现被代理类的接口,在此 ...
- JavaScript HTML Dom改变HTML
本人为小白,首次写博客 有不正确的地方望多多指点与见谅!! 一,改变HTML的内容 语法: document.getElementById(id).innerHTML=new HTML: 具体用法: ...
- Kafka 学习笔记-基本概念
一.基本概念 Kafka是一个分布式的,可分区的,可复制的消息系统 Kafka以由一个或多个服务以集群的方式运行,服务叫broker producer,consuer通过kafka topic发布,预 ...