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


【注意】在这篇文章中我采取的是React框架的写法,可能有些影响阅读,请多多包涵,className等同于class, style= {{background:'red'}}等同于 style = "background:red",可放心食用
【准备工作】 把下面这两个东西写在你的html文件里:
<link rel="stylesheet" href="http://cdn.staticfile.org/foundation/6.3.0-rc3/css/foundation.min.css">(放在head标签内) <script src="http://cdn.staticfile.org/jquery/3.1.1/jquery.min.js"></script>(放在body底部)
<div className = 'row'>
<div className = 'small-2 medium-6 large-10 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-10 medium-6 large-2 columns' style = {{background:'blue'}}>column2</div>
</div>



<div className = 'row'>
<div className = 'small-6 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-6 columns' style = {{background:'blue'}}>column2</div>
</div>



<div className = 'row'>
<div className = 'large-6 columns' style = {{background:'red'}}>column1</div>
<div className = 'large-6 columns' style = {{background:'blue'}}>column2</div>
</div>


<div className = 'row' >
<div className = 'large-6 columns' style = {{background:'red'}}>column1</div>
<div className = 'large-6 columns' style = {{background:'blue'}}>column2</div>
</div>

<div className = 'row' style = {{maxWidth:'100%'}}>
<div className = 'small-3 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>
<div className = 'small-3 columns' style = {{background:'yellow'}}>column2</div>
</div>

<div className = 'row' style = {{maxWidth:'100%'}}>
<div className = 'small-3 columns' style = {{background:'red'}}>column1</div>
<div className = 'small-3 columns' style = {{background:'blue'}}>column2</div>
<div className = 'small-3 columns end' style = {{background:'yellow'}}>column3</div>
</div>

<div className = 'row'>
<div className = 'small-6 small-centered columns' style = {{background:'red'}}>column1</div>
</div>

<div className = 'row'>
<div className = 'small-6 small-centered medium-uncentered large-uncentered columns' style = {{background:'red'}}>
column1
</div>
</div>

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'grey'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'blue'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'red'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'yellow'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'black'}}></div>
<div className = 'columns column-block' style ={{minHeight:'20px',background:'orange'}}></div>
</div>



<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
<div className = 'columns ' style ={{minHeight:'20px',background:'grey'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'blue'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'red'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'yellow'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'black'}}></div>
<div className = 'columns ' style ={{minHeight:'20px',background:'orange'}}></div>
</div>


<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxWidth:'100%'}}>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'grey'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'blue'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'red'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'yellow'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'black'}}></div>
<div className = 'small-3 columns' style ={{minHeight:'20px',background:'orange'}}></div>
</div>

<div className = 'row small-up-2 medium-up-3 large-up-4' style = {{maxmaxWidth:'100%'}}>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'grey'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'blue'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'red'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'yellow'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'black'}}></div>
<div className = ' columns ' style ={{width:'25%',minHeight:'20px',background:'orange'}}></div>
</div>

<div>
<p className = 'show-for-small'>我在小/中/大型屏幕显示</p>
<p className = 'show-for-medium'>我在中大型屏幕显示</p>
<p className = 'show-for-large'>我在大型屏幕显示</p>
</div>



<div>
<p className = 'show-for-small-only'>我只在小型屏幕显示</p>
<p className = 'show-for-medium-only'>我只在中型屏幕显示</p>
<p className = 'show-for-large-only'>我只在大型屏幕显示</p>
</div>



<div className = 'row'>
<p className = 'float-left'>float-left</p>
<p className = 'float-right'>float-right</p>
</div>




最后最后的一点
【响应式】foundation栅格布局的“尝鲜”与“填坑”的更多相关文章
- Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板
Django中间件,CSRF(跨站请求伪造),缓存,信号,BootStrap(模板)-响应式(栅格)+模板 1.中间件(重要): 在Django的setting中有个MIDDLEWARE列表,里面的东 ...
- 响应式Web设计 – 布局
写在前面 去年上半年,我开始着手推动项目中响应式设计的落地.以官网优化需求为契机,主动去做了响应式的页面设计,也说服了产品.设计和开发的相关同事一起把它上线落实,但不幸的是,由于各种方面的原因,比如, ...
- 第二次讨论——响应式设计、布局技巧、css性能优化、css预处理
第二次讨论 [响应式设计] 集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境(系统平台.屏幕尺寸.屏幕定向等)进行相对应的布局. 响应式布局: meta标签的实用:设置布局宽度等于 ...
- 响应式Web设计 - 布局
可扩展的布局 有一种流体布局的概念在早起web兴起的时,就开始盛行了.它的概念是说页面会根据浏览器窗口的变化进行更改,网站可以通过维护一套代码,保质一致性的设计.我这里强调的可扩展的布局也是基于这个概 ...
- 【转载】基于vw等viewport视区相对单位的响应式排版和布局
文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/wordpress/ 原文链接:http://www.zhangxinxu.com/wordpress/?p=5 ...
- APP---发布动态、朋友圈类似,多张图片动响应式正方形展示布局 vue.js,aui.css,apiclouv
环境:vue.js,aui.css,apicloud 1.没做控制之前.图片真实长度宽度. 2.下面用js控制高度 js部分 //js 部分 //先动态的获取属性宽度 var box4_col3 = ...
- 用CSS实现响应式布局
响应式网页看起来高大上,但实际上,不用JS只用CSS也能实现响应式网站的布局 要用到的就是CSS中的媒体查询下面来简单介绍一下怎么运用 使用@media 的三种方式 第一: 直接在CSS文件中使用 @ ...
- 使用bootstrap建立响应式网页——头部导航栏
1.要建立响应式网站的布局,这个时候bootstrap的高级就能体现出来了. 2.先来了解一下bootstrap提供了哪些响应式工具供我们使用: (1)屏幕宽度尺寸的概念: <768px ...
- Android响应式UI教程
原文:Responsive UI Tutorial for Android 作者:James Nocentini 译者:kmyhy 2017/5/4 更新说明: 由 James Nocentini 更 ...
随机推荐
- Vuex 模块化实现待办事项的状态管理
前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸 ...
- linux计算程序运行时间
转自: http://www.cnblogs.com/NeilHappy/archive/2012/12/08/2808417.html #include <sys/time.h> int ...
- WF学习思维导图
原文 来自我的有道笔记-老文重发系列 如果配置加载核心服务,那么需要将持久化服务和跟踪服务放在一个数据库中! 1.用工作流的优点 a.提供将复杂任务分解的途径,通过将每个操作分解到活动中更便于业务 ...
- Centos 搭建LAMP环境
1.安装Apache yum install httpd 相关命令: systemctl start httpd.service #启动apache systemctl stop httpd.serv ...
- 关于<context:property-placeholder>的一个有趣现象
转:http://stamen.iteye.com/blog/1926166 先来看下A和B两个模块 A模块和B模块都分别拥有自己的Spring XML配置,并分别拥有自己的配置文件: A模块 A模块 ...
- onchange、onclick、onblur等事件区别
onblur:控件在失去焦点的时候触发 OnChange:当控件的内容发生改变时触发该事件 OnClick:点击该控件时触发 OnKeyDown:在控件有焦点的情况下,按下键时发生 OnKeyUp:在 ...
- 隐性URL与显性URL区别与SEO考虑
隐性URL与显性URL经常在实现页面跳转的时候用到,这两种方式有什么区别,各自对SEO有什么影响?看一下阿里云的官方文档解释: 显性URL转发: 例如: http://b.com/ 指向 http:/ ...
- 联想A7600-m刷机心得
先来说说刷机 联想A7600-m的刷机
- Java中static的特点
前两天面试时被问到静态的特点,当时回答地不是很好,现在来总结一下 在了解某样东西的时候我们通常会从它是什么,为什么,和怎么样在三方面来衡量,对于java中的static,我们也这样讨论下,要明确以下几 ...
- supervisor的集中化管理搭建
1.supervisor很不错,可惜是单机版,所以上github上找了个管理工具supervisord-monitor. github地址: https://github.com/mlazarov/s ...