一，效果图。

二，代码。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Todo</title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">

    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->

    <script src="js/app2.js"></script>

    <script src="cordova.js"></script>

    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">

    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>

</head>

<body>

    <!--同等大小网格-->

    <div class="row">

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

    </div>

    <!--指定列宽-->

    <div class="row">

        <div class="col col-50">.col.col-50</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

    </div>

    <div class="row">

        <div class="col col-75">.col.col-75</div>

        <div class="col">.col</div>

    </div>

    <div class="row">

        <div class="col">.col</div>

        <div class="col col-75">.col.col-75</div>

    </div>

    <div class="row">

        <div class="col">.col</div>

        <div class="col">.col</div>

    </div>

    <!--有偏移量的网格-->

    <div class="row">

        <div class=‘col col-33 col-offset-33’>.col</div>

        <div class="col">.col</div>

    </div>

    <div class="row">

        <div class="col col-33">.col</div>

        <div class='col col-33 col-offset-33'>.col</div>

    </div>

    <div class="row">

        <div class="col col-33 col-offset-67">.col</div>

    </div>

    <!--纵向对齐网格-->

    <div class="row">

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">1

            <br>2

            <br>3

            <br>4</div>

    </div>

    <div class="row">

        <div class="col col-top">.col</div>

        <div class="col col-center">.col</div>

        <div class="col col-bottom">.col</div>

        <div class="col">1

            <br>2

            <br>3

            <br>4</div>

    </div>

    <div class="row row-top">

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">1

            <br>2

            <br>3

            <br>4</div>

    </div>

    <div class="row row-center">

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">1

            <br>2

            <br>3

            <br>4</div>

    </div>

    <div class="row row-bottom">

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">1

            <br>2

            <br>3

            <br>4</div>

    </div>

    <!--响应式网格-->

    <div class="row responsive-sm">

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

        <div class="col">.col</div>

    </div>

</body>

</html>

参考资料：《菜鸟教程》

【代码笔记】Web-ionic 网格(Grid)的更多相关文章

  1. ionic-CSS：ionic 网格(Grid)

    ylbtech-ionic-CSS:ionic 网格(Grid) 1.返回顶部 1. ionic 网格(Grid) ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Fle ...

  2. amazeui学习笔记--css（布局相关1）--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  3. Ionic入门二：网格(Grid)页面布局

    ionic 的网格(Grid)和其他大部分框架有所不同,它采用了弹性盒子模型(Flexible Box Model) .而且在移动端,基本上的手机都支持.row 样式指定行,col 样式指定列. 1. ...

  4. 《编写高质量代码：Web 前端开发修炼之道》 笔记与读后感

    编写高质量代码:Web 前端开发修炼之道/曹刘阳著. —北京:机械工业出版社,2010.5 第一版 涉及到的知识点: 1. CSS Sprites 在国内很多人叫css精灵,是一种网页图片应用处理方式 ...

  5. 【hadoop代码笔记】Mapreduce shuffle过程之Map输出过程

    一.概要描述 shuffle是MapReduce的一个核心过程,因此没有在前面的MapReduce作业提交的过程中描述,而是单独拿出来比较详细的描述. 根据官方的流程图示如下: 本篇文章中只是想尝试从 ...

  6. 【hadoop代码笔记】hadoop作业提交之汇总

    一.概述 在本篇博文中,试图通过代码了解hadoop job执行的整个流程.即用户提交的mapreduce的jar文件.输入提交到hadoop的集群,并在集群中运行.重点在代码的角度描述整个流程,有些 ...

  7. 【Hadoop代码笔记】目录

    整理09年时候做的Hadoop的代码笔记. 开始. [Hadoop代码笔记]Hadoop作业提交之客户端作业提交 [Hadoop代码笔记]通过JobClient对Jobtracker的调用看详细了解H ...

  8. <Python Text Processing with NLTK 2.0 Cookbook>代码笔记

    如下是<Python Text Processing with NLTK 2.0 Cookbook>一书部分章节的代码笔记. Tokenizing text into sentences ...

  9. [学习笔记] SSD代码笔记 + EifficientNet backbone 练习

    SSD代码笔记 + EifficientNet backbone 练习 ssd代码完全ok了,然后用最近性能和速度都非常牛的Eifficient Net做backbone设计了自己的TinySSD网络 ...

随机推荐

  1. DRF 商城项目 - 日志处理

    logging  模块 logging 模块是最基本的日志处理模块 缺陷 但是拥有一些很致命的缺陷 要求用户主动查询, 需要登录到服务器才可以查看日志文件 自带的报错外部通知也没办法判断同类取舍, 短 ...

  2. 「NOI2018」屠龙勇士（EXCRT）

    「NOI2018」屠龙勇士(EXCRT) 终于把传说中 \(NOI2018D2\) 的签到题写掉了... 开始我还没读懂题目...而且这题细节巨麻烦...(可能对我而言) 首先我们要转换一下,每次的 ...

  3. Behavior Tree 用 Lua 实现一个最简行为树

    local function Traverse(node, ...) local t = node.type if t == SELECTOR then , #node do if Traverse( ...

  4. 有没有人曾告诉你，你的SQL又报错了？[开发篇]

    引语:线上运行的真实环境总是变幻莫测,明明你在本地测试的时候各种情况都是OK得不要不要的,也许你还在为自己某个地方炫酷的效果以及神奇的设计感到激动不已!但是,到线上以后,他就会偶尔跟抽风一样的跟你sa ...

  5. Java的组合排列问题

    从4个人中选2个人参加活动,一共有6种选法. 从n个人中选m个人参加活动,一共有多少种选法?C(m/n)=C((m-1)/(n-1))+C(m/(n-1))数学算法 public class Main ...

  6. OC学习3——C语言特性之指针

    1.指针是C语言中的一个非常重要的概念,实际上,OC系统类的变量.自定义类的变量等都是指针.定义指针变量的语法格式如下,其中*代表一个指针变量,整个语法代表定义一个指向特定类型的变量的指针变量.注意: ...

  7. for(var i=0;i<=3;i++){ setTimeout(function() { console.log(i) }, 10);}

    for(var i=0;i<=3;i++){ setTimeout(function() {  console.log(i)  }, 10);} 答案:打印4次4 这道题涉及了异步.作用域.闭包 ...

  8. 不要再说我简历上Java项目都好low！【offer收割机必备】

    获取精品学习资料私信 欢迎加入QQ群架构华山论剑:836442475(大牛聚集地)一起交流学习探讨! 目录 高级工程师必备:系统设计能力 如何让你的项目更有技术含量 这篇文章我们继续来聊一聊,在系统设 ...

  9. RobotFramework测试问题二：各种元素不能定位问题

    各种元素不能定位问题 一.元素定位 A. Click Element + xpath B. Click Element + contains C. Execute Javascript + getEl ...

  10. Apache Commons Beanutils 一 （使用PropertyUtils访问Bean属性）

    BeanUtils简要描述 beanutils,顾名思义,是java bean的一个工具类,可以帮助我们方便的读取(get)和设置(set)bean属性值.动态定义和访问bean属性: 细心的话,会发 ...