【响应式】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栅格布局的“尝鲜”与“填坑”相关推荐
- 微金所页面制作(Bootstrap 响应式开发 栅格布局 响应式布局)
该页面适用于 PC端 和 移动端,在响应式开发的媒体查询下能够适配所有屏幕. 一.页面效果 二.结构样式说明 (需引入bootstrap 相关样式文件) 结构分为八块: 头部块:.wjs_header ...
- html页面栅格系统,分享响应式CSS栅格系统
分享响应式CSS栅格系统 栅格系统 这种东西和许多同类工具/素材一样,"系统"二字让它看起来无比高大上,而实际上大多数的栅格系统 只是一系列纵横交错的细线构成.很简单?看起来确实如 ...
- 响应式网页的布局设计
值得收藏的14款响应式前端开发框架 作为今年大热的设计趋势,响应式已然是设计师的标配技能.今天阿里的同学从响应式设计的布局类型.布局实现两方面深入讲解,有哪些实现布局的方式,该采用何种方式,都有相当专 ...
- html5 box布局,使用Flexbox打造响应式网页网格布局
CSS3的Flexbox可以非常容易的制作出各种布局效果.前面我们已经结束了flexbox的基本使用方法,水平布局和垂直布局方法.这篇文章我们来看看如果制作具有响应式效果的flexbox双列网格布局效 ...
- 前端响应式/自适应/流动布局
文章目录 1. 控制视口(viewport) 2. 媒体查询 2.1 媒体类型 2.2 媒体特征 2.3 逻辑条件 2.4 使用媒体查询设置断点 3. 图片的自适应 4 自适应图片等素材 5 不使用绝 ...
- 从零开始前端学习[38]:html5中的弹性布局一(移动端响应式实现各种布局,极其重要)
html5中的弹性布局(移动端及其重要) 弹性盒子模型是什么? 容器属性 提示 博主:章飞_906285288 博课地址:http://blog.csdn.net/qq_29924041 弹性盒子模型 ...
- html响应式五栏布局,HTML – 响应式2列CSS布局,包括固定宽度的侧边栏?
在任何地方找不到解决方案(我猜这一定是一个非常常见的问题). 我正在创建一个带侧边栏的响应式设计,其中侧边栏需要具有200px的固定宽度并且具有未知高度.我怎样才能使主要内容区占据所有剩余的宽度,而不 ...
- 响应式html编辑器布局,基于Bootstrap响应式所见即所得的jQuery编辑器插件
LineControl Editor是一款基于Bootstrap的响应式.所见即所得的富文本编辑器jQuery插件.该富文本编辑器可以使用textarea元素或任何一个容器元素来生成,它拥有常见富文本 ...
- 极其简单的响应式的模块化布局、看板布局 js 工具
官网 www.xmlayout.com 效果图
最新文章
- 无监督域对抗算法:ICCV2019论文解析
- 活动|跟着微软一起,拥抱开源吧!
- 7-26 有重复的数据I (10 分)
- 美团点评移动网络优化实践
- IntelliJ IDEA 编辑器配置vue高亮显示
- react 开源项目_2020年2月Github上最热门的JavaScript开源项目
- 排序数组中的两个数字之和
- iOS边练边学--UIScrollView的属性简单使用,代理的简单介绍以及内容缩放
- Hls之Hls.js源码解析
- hive时间函数入门
- nginx日志采集 mysql_shell + go + mysql nginx日志统计 (三) :数据的展示
- Android基于腾讯云的小直播开发步骤
- ZDM按横断面水位线河道开挖
- 软件测试和软件调试的区别
- 【Linux c】sipc
- 使用 阿里云 播放器播放 .flv 和 hls(.m3u8) 格式的视频流
- 计算机应用研究被ei检索吗,SCI/EI检索的国内计算机期刊
- c++ getline()详解
- Spring中事务提交成功后处理的异步调用方法
- 电流的磁效应与安培右手定则实验
热门文章
- Asterisk 是什么?
- 三、项目分工(华为项目管理法-孙科炎读书摘要)
- “辣条一哥”卫龙冲击港股IPO,我又吃出一家上市公司
- STM32F4深入学习【RCC】
- 服务器响应551,为什么输出fi上的ftp响应551错误
- 笔记:centos7 换内核安装锐速(该方法不好用,不建议)
- 12.嵌入式控制器EC实战 SMBus概述
- 手板(prototype)
- matlab牛顿法解非线性方程组,matlab实现牛顿迭代法求解非线性方程组.pdf
- C#实现微信公众号群发消息(解决一天只能发一次的限制)实例分享