ionic中 .col : 默认的定宽列
.col : 默认的定宽列
在ionic的栅格中,每一行的各列默认是等宽的,这使得实现一个图片 浏览界面非常简单。下图是instagram app的截图:
instagram <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
<link rel="stylesheet" type="text/css" href="ionic.min.css">
</head>
<body>
<div class="bar bar-header bar-positive">
<h1 class="title">POPULAR</h1>
<a class="button icon ion-refresh"></a>
</div>
<div class="scroll-content has-header">
<div class="row">
<div class="col"><img src="img/g-1.jpg"></div>
<div class="col"><img src="img/g-2.jpg"></div>
<div class="col"><img src="img/g-3.jpg"></div>
<div class="col"><img src="img/g-4.jpg"></div>
</div>
<div class="row">
<div class="col"><img src="img/g-5.jpg"></div>
<div class="col"><img src="img/g-6.jpg"></div>
<div class="col"><img src="img/g-7.jpg"></div>
<div class="col"><img src="img/g-8.jpg"></div>
</div>
<div class="row">
<div class="col"><img src="img/g-9.jpg"></div>
<div class="col"><img src="img/g-10.jpg"></div>
<div class="col"><img src="img/g-11.jpg"></div>
<div class="col"><img src="img/g-12.jpg"></div>
</div>
<div class="row">
<div class="col"><img src="img/g-13.jpg"></div>
<div class="col"><img src="img/g-14.jpg"></div>
<div class="col"><img src="img/g-15.jpg"></div>
<div class="col"><img src="img/g-16.jpg"></div>
</div>
</div>
<div class="tabs tabs-dark tabs-icon-only">
<a class="tab-item"><i class="icon ion-home"></i></a>
<a class="tab-item active"><i class="icon ion-star"></i></a>
<a class="tab-item"><i class="icon ion-camera"></i></a>
<a class="tab-item"><i class="icon ion-chatbubble"></i></a>
<a class="tab-item"><i class="icon ion-document"></i></a>
</div>
</body>
</html>
ionic中 .col : 默认的定宽列的更多相关文章
- datagrid在MVC中的运用06-固定连续列
本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...
- NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应
该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- NEC学习 ---- 布局 -两列定宽
这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- NEC学习 ---- 布局 -三列, 左右定宽,中间自适应
---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...
- 中间自适应,左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局
一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...
- css布局:定宽,自适应
css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...
随机推荐
- 【留念贴】Android开发——计算器
[过程] 在电商学霸&&代码女神XuFei的影响下,接触到了关于Android客户端的一些开发,第一次在Android平台搞出了一个App,真的是激动不已,所以必须开个留念贴记录一下. ...
- kali Rolling安装之后的一些常用配置总结
添加普通用户 useradd -m -G sudo,video,audio,cdrom -s /bin/bash OKing把某个用户添加到组中: sudo usermod -a 用户名 -G 组名 ...
- jquery makearray()使用
makearray(),转换一个类似数组的对象成为真正的JavaScript数组.首先看看jquery中array的定义 makeArray: function( arr, results ) { v ...
- C# 语言规范_版本5.0 (第4章 类型)
1. 类型 C# 语言的类型划分为两大类:值类型 (Value type) 和引用类型 (reference type).值类型和引用类型都可以为泛型类型 (generic type),泛型类型采用一 ...
- jQuery 事件 - bind() 方法
定义和用法 bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 实例1(一个事件) 记得把js引用地址换掉 当点击鼠标时,隐藏或显示 p 元素: <html&g ...
- Openjudge-计算概论(A)-鸡尾酒疗法
描述: 鸡尾酒疗法,原指“高效抗逆转录病毒治疗”(HAART),由美籍华裔科学家何大一于1996年提出,是通过三种或三种以上的抗病毒药物联合使用来治疗艾 滋病.该疗法的应用可以减少单一用药产生的抗药性 ...
- msmtp+mutt发送邮件报警
1).yum 安装 msmtp+mutt yum install -y msmtp mutt 2).配置Muttrc信息 vim /etc/Muttrc set sendmail="/usr ...
- 从MySQL全库备份中恢复某个库和某张表【转】
从MySQL全库备份中恢复某个库和某张表 一.全库备份-A [root@mha2 backup]#mysqldump -uroot -p123456 --default-character-set=u ...
- 笨方法学python--读写文件
1 文件相关的函数 close read readline 读取文本文件中的一行 truncate 清空文件 write('adb') 写入 2 写文件,首先要在open时,写入权限w targe ...
- slam相关知识
Kinect视觉SLAM技术介绍 http://www.open-open.com/news/view/ce76e2 本文介绍SLAM的历史.理论以及实现的方式,且主要介绍基于视觉(Kinect)的实 ...