一，效果图。

二，代码。

<!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. 顺藤摸瓜：一个专黑建筑行业的QQ黏虫团伙现形记

    QQ粘虫是已经流行多年的盗号木马,它会伪装QQ登陆界面,诱骗受害者在钓鱼窗口提交账号密码.近期,360QVM引擎团队发现一支专门攻击建筑行业人群的QQ粘虫变种,它伪装为招标文档,专门在一些建筑/房产行 ...

  2. 兼容多数浏览器的js添加收藏夹脚本

    浏览器不断发展,js的很多脚本需要跟进才能适应,目前多数代码对新版本浏览器(IE11, Firefox 27)无法适用,特关注跟进. 推荐代码1 适用浏览器:IE11(windows 8.1), Fi ...

  3. welcome-file-list修改后不生效

    用别的浏览器重新尝试一下,或者清缓存.我就是这样解决的.值得注意的就是,<welcome-file>里面指定的文件可以是.do或者是action.

  4. Django--Session 操作

    Session Session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要 ...

  5. cmd窗口使用sftp命令非密钥和密钥登录SFTP服务器的两种方式

    cmd窗口使用sftp命令非密钥和密钥登录SFTP服务器的两种方式 一.在Windows环境下搭建SFTP服务器可参见http://www.cnblogs.com/Kevin00/p/6341295. ...

  6. mysql 开发进阶篇系列 31 工具篇(mysql连接工具与MyISAM表压缩工具)

    一.mysql 连接工具 在mysq提供的工具中,DBA使用最频繁的莫过于mysql.这里的mysql是指连接数据库的客户端工具. 1.1 连接选项 -u, -- user=name 指定用户名 -p ...

  7. 移动端自动化测试-AppiumApi接口详解

    Appium 初始化配置信息(Desired Capabilities),Desired Capabilities实际上就是一个字典,它主要用于向Appium Server提供初始化配置参数,如:想要 ...

  8. Android_性能优化转载

    胡凯 RSS Blog Archives Android Training in Chinese About Android性能优化典范 JAN 17TH, 2015 | COMMENTS 2015年 ...

  9. 全网最详细的IDEA、Eclipse和MyEclipse之间于Java web项目发布到Tomcat上运行成功的对比事宜【博主强烈推荐】【适合普通的还是Maven方式创建的】（图文详解）

    不多说,直接上干货! IDEA [适合公司业务]全网最详细的IDEA里如何正确新建[普通或者Maven]的Java web项目并发布到Tomcat上运行成功[博主强烈推荐](类似eclipse里同一个 ...

  10. SQL 必知必会·笔记<20>高级SQL特性

    1. 约束 约束(constraint)就是管理如何插入或处理数据库数据的规则.DBMS通过在数据库表上施加约束来实施引用完整性. 1.1 主键 主键是一种特殊的约束,用来保证一列(或一组列)中的值是 ...