.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 : 默认的定宽列的更多相关文章

  1. datagrid在MVC中的运用06-固定连续列

    本文主要体验datagrid的frozenColumns属性. □ frozenColumns效果: 在frozenColumns的列将保持不动,而其他列横向滚动. □ frozenColumns效果 ...

  2. NEC学习 ---- 布局 -两列， 右侧定宽，左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  3. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  4. NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  5. NEC学习 ---- 布局 -两列定宽

    这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...

  6. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  7. NEC学习 ---- 布局 -三列， 左右定宽，中间自适应

    ---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...

  8. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  9. css布局：定宽，自适应

    css三栏布局:1.中自:float,absolute,margin三种方法.2.中固:margin,table两种方法. 两边定宽,中间自适应: float: #left{ float:left; ...

随机推荐

  1. linux命令随记

    1.当再Hadoop平台上跑代码的时候,可能会发现有些job是需要被kill重新跑的,此刻,如果一个一个手动去删除会很缓慢,此刻需要使用一个简单的脚本来实现自动全部删除操作: for i in `ha ...

  2. 计算机网络课程优秀备考PPT之第六章传输层（六）

    为了记录自己从2016.9~2017.1的<计算机网络>助教生涯,也为了及时梳理和整写笔记! 前期博客是, 计算机网络课程优秀备考PPT之第一章概述(一) 计算机网络课程优秀备考PPT之第 ...

  3. zookeeper(1)

    参考文档:zookeeper中文网 一.介绍安装 zookeeper 是一个高效的分布式协调服务,它暴露了一些公用服务,比如命名/配置/同步控制/群组服务等.我们可以使用ZK来实现一些功能,例如:达成 ...

  4. 【转】Storm并行度详解

    1.Storm并行度相关的概念 Storm集群有很多节点,按照类型分为nimbus(主节点).supervisor(从节点),在conf/storm.yaml中配置了一个supervisor,有多个槽 ...

  5. 我使用的Bash脚本模板

    在Linux环境下(包括在相应的模拟环境,如Windows中的Cygwin)工作的时间久了,就会慢慢积累出一些自己写的小脚本程序,用于加速日常的操作与工作流程,如自动挂载与卸载U盘,映射网络驱动器,数 ...

  6. Tyvj-TOM的无穷序列

    背景 蛟川书院模拟试题 描述 TOM有一个无穷序列中如下:110100100010000100000.....请你帮助TOM找出在这个无穷序列中指定位置上的数字 输入格式 第一行一个正整数N,表示询问 ...

  7. python基础（二）- 字符串

    一.运算符 1.结果是值: 算术运算 赋值运算 2.结果是布尔值: 比较运算:>   <   ==    >=   <=  !=  <> 逻辑运算:and  or ...

  8. phabricator 搭建

    os:debian7 Installation Guide :https://secure.phabricator.com/book/phabricator/ $ cd /data # 安装目录 da ...

  9. OC-之AFNetworking

    AFNetworking介绍与用法: http://cocoadocs.org/docsets/AFNetworking/2.4.1/index.html

  10. HDU 5828 Rikka with Sequence

    好久没写线段树了,这题作为一个回味.. 第一种操作的话,就是一个延迟标记. 第二种操作可以暴力更新下去,但是有一个优化,如果某区间内所有值都是一样的,或者最大值和最小值相差1,那么到此结束,不要继续往 ...