一，效果图。

二，代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Todo</title>
  7.     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
  8.     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
  9.     <script src="lib/ionic/js/ionic.bundle.js"></script>
  10.     <!-- 在使用 Cordova/PhoneGap 创建的 APP 中包含的文件，由 Cordova/PhoneGap 提供，(开发过程中显示 404) -->
  11.     <script src="js/app2.js"></script>
  12.     <script src="cordova.js"></script>
  13.     <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet">
  14.     <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script>
  15. </head>
  16.  
  17. <body>
  18.     <!--同等大小网格-->
  19.     <div class="row">
  20.         <div class="col">.col</div>
  21.         <div class="col">.col</div>
  22.         <div class="col">.col</div>
  23.         <div class="col">.col</div>
  24.         <div class="col">.col</div>
  25.     </div>
  26.     <!--指定列宽-->
  27.     <div class="row">
  28.         <div class="col col-50">.col.col-50</div>
  29.         <div class="col">.col</div>
  30.         <div class="col">.col</div>
  31.     </div>
  32.     <div class="row">
  33.         <div class="col col-75">.col.col-75</div>
  34.         <div class="col">.col</div>
  35.     </div>
  36.     <div class="row">
  37.         <div class="col">.col</div>
  38.         <div class="col col-75">.col.col-75</div>
  39.     </div>
  40.     <div class="row">
  41.         <div class="col">.col</div>
  42.         <div class="col">.col</div>
  43.     </div>
  44.     <!--有偏移量的网格-->
  45.     <div class="row">
  46.         <div class=‘col col-33 col-offset-33’>.col</div>
  47.         <div class="col">.col</div>
  48.     </div>
  49.     <div class="row">
  50.         <div class="col col-33">.col</div>
  51.         <div class='col col-33 col-offset-33'>.col</div>
  52.     </div>
  53.     <div class="row">
  54.         <div class="col col-33 col-offset-67">.col</div>
  55.     </div>
  56.     <!--纵向对齐网格-->
  57.     <div class="row">
  58.         <div class="col">.col</div>
  59.         <div class="col">.col</div>
  60.         <div class="col">.col</div>
  61.         <div class="col">1
  62.             <br>2
  63.             <br>3
  64.             <br>4</div>
  65.     </div>
  66.     <div class="row">
  67.         <div class="col col-top">.col</div>
  68.         <div class="col col-center">.col</div>
  69.         <div class="col col-bottom">.col</div>
  70.         <div class="col">1
  71.             <br>2
  72.             <br>3
  73.             <br>4</div>
  74.     </div>
  75.     <div class="row row-top">
  76.         <div class="col">.col</div>
  77.         <div class="col">.col</div>
  78.         <div class="col">.col</div>
  79.         <div class="col">1
  80.             <br>2
  81.             <br>3
  82.             <br>4</div>
  83.     </div>
  84.     <div class="row row-center">
  85.         <div class="col">.col</div>
  86.         <div class="col">.col</div>
  87.         <div class="col">.col</div>
  88.         <div class="col">1
  89.             <br>2
  90.             <br>3
  91.             <br>4</div>
  92.     </div>
  93.     <div class="row row-bottom">
  94.         <div class="col">.col</div>
  95.         <div class="col">.col</div>
  96.         <div class="col">.col</div>
  97.         <div class="col">1
  98.             <br>2
  99.             <br>3
  100.             <br>4</div>
  101.     </div>
  102.     <!--响应式网格-->
  103.     <div class="row responsive-sm">
  104.         <div class="col">.col</div>
  105.         <div class="col">.col</div>
  106.         <div class="col">.col</div>
  107.         <div class="col">.col</div>
  108.     </div>
  109. </body>
  110.  
  111. </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. 在notepad++中使用正则匹配功能(一-龥！-～) 中文[利刃篇]

    用正则时间越久,人就越懒,就越知道正则的强大.正则,不只是在代码里用到,在字符查找是也会用到,学会适当使用正则,将会使你的工作事办功倍!但是,中文却是一个砍,不容易过. 于是在用notepad++,也 ...

  2. javascript实现二分法

    js 实现数组查找二分法 二分法实现原理:二分查找可以解决已经排好序数组的查找问题:只要数组中包含target(即要查找的值),那么通过不断缩小包含target数组的范围,最终就可以找到它. 其算法流 ...

  3. Go 新起点

    因项目需求 又得开始啃Go了,虽然比计划早了点,撸起袖子开始干吧~

  4. ［Node.js与数据库］node-mysql 模块介绍

    ［Node.js与数据库］node-mysql 模块介绍   转载至:https://itbilu.com/nodejs/npm/NyPG8LhlW.html#multiple-statement-q ...

  5. Java之基础学习（数据类型、运算符、分支语句和循环语句）

    在工作用得比较多的是shell和python编程,对于java以前也学习过,使用很少,这次借朋友推荐的java视频教程来温习下. 也是因为现在很多开源测试工具使用java编写的,学习一下更有助于测试工 ...

  6. [每天解决一问题系列 - 0012] 如何通过程序获取IIS站点信息

    问题描述: 在WiX中需要判断某个站点是否存在,WiX没有这个能力,该怎么做呢? 解决方案: 解决方法就是写一个Custom Action来检测,实现的途径也有很多,现在想到了这么几个 1)Power ...

  7. Django--Admin 组件

    Django 提供了admin 组件 为项目提供基本的管理后台功能(对数据表的增删改查). Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib ...

  8. Oracle 基本知识回顾

    1.查找数据库所用的字符集编码:SELECT USERENV('language') FROM DUAL;2.将一个表中的字段,插入到这个表:INSERT INTO TABLE SELECT * FR ...

  9. 从零开始学 Web 之 DOM（七）事件冒泡

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  10. 从零开始学 Web 之 HTML5（一）HTML5概述，语义化标签

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...