网格列表由一系列的单元格构成，它通常用于展示相册。它可以和网格布局系统配合使用进行布局。

调用方式

网格列表组件使用纯 CSS 编写，只需编写 HTML 代码即可生效。

相关资料

样式

基本样式

操作栏文本

操作栏可以包含两行文本

操作栏按钮

操作栏样式

在 .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-top 可以使操作栏位于单元格顶部。

在 .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-transparent 可以使操作栏拥有透明背景。

在 .mdui-grid-tile-actions 上添加类 .mdui-grid-tile-actions-gradient 可以使操作栏拥有渐变背景。

利用网格布局系统进行布局

在等分列的 .mdui-row-* 上添加类 .mdui-grid-list，能将单元格之间的间距调整为 4px。

CSS 类名列表类名效果

.mdui-grid-tile定义一个网格列表的瓦片。

.mdui-grid-tile-actions定义瓦片中的操作栏。

.mdui-grid-tile-actions-top使操作栏位于瓦片顶部。

.mdui-grid-tile-actions-transparent使操作栏拥有透明背景。

.mdui-grid-tile-actions-gradient使操作栏拥有渐变背景。

.mdui-grid-tile-text定义瓦片操作栏中的文本。

.mdui-grid-tile-title定义瓦片操作栏文本中的标题。

.mdui-grid-tile-subtitle定义瓦片操作栏文本中的副标题。

.mdui-grid-tile-buttons定义瓦片操作栏中的按钮区域。

.mdui-grid-list定义网格列表。配合网格布局系统使用时。

html 滑动网格列表,网格列表相关推荐

  1. html仿今日头条下拉刷新,小程序 仿今日头条 带滑动切换的文章列表

    小程序 仿今日头条 带滑动切换的文章列表 发布时间:2018-07-19 09:41, 浏览次数:353 拿别人仿今日头条的代码做的改版, 首先感谢前辈.其次,这个代码虽然能用,但是js里还是存在一些 ...

  2. css网格_CSS网格容器

    css网格 CSS | 网格容器 (CSS | Grid Containers) There are numerous ways to display our list items or elemen ...

  3. CSS网格教程：网格布局模块/网格容器/网格项目

    目录 CSS 网格布局模块 网格布局 浏览器支持 网格元素 实例 Display 属性 实例 实例 网格列(Grid Columns) 网格行(Grid Rows) 网格间隙(Grid Gaps) 实 ...

  4. html和css有序列表,HTMLCSS基础学习笔记14—有序列表及列表嵌套

    我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去 ...

  5. Python学习（四）列表与列表操作

    读取列表 列表:由一系列按特定顺序排列的元素组合.Python中使用"[]"表示列表 bicycles = ['trek','cannondale','redline','spec ...

  6. 6、HTML有序列表+无序列表+定义列表

    在网站开发过程中,我们经常会使用到列表(list).列表可以将若干条相关的内容进行整理,让内容看起来更加有条理. HTML 为我们提供了 3 种不同的列表: 有序列表 无序列表 定义列表 1. 有序列 ...

  7. python列表的嵌套_Python中关于列表嵌套列表的处理

    在处理列表的时候我们经常会遇到列表中嵌套列表的结构,如果我们要把所有元素放入一个新列表,或者要计算所有元素的个数的话应该怎么做呢? 第一个例子 对于上图中的这样一组数据,如果我们要知道这个CSV文件中 ...

  8. HTML带有圆点的列表,HTML 列表

    HTML 列表(Lists) 大部分通用的HTML列表使用的是有序和无序的列表: HTML 列表(Lists) 有序列表: 第一个列表项 第二个列表项 第三个列表项 无序列表: 列表项 列表项 列表项 ...

  9. 【STM32】FreeRTOS列表和列表项详解

    00. 目录 文章目录 00. 目录 01. 概述 02. 列表 03. 列表项 04. 列表相关宏 05. 列表相关函数 5.1 初始化列表 5.2 初始化列表项 5.3 列表项插入函数 5.4 列 ...

  10. python3列表_Python3列表

    Python中有六种内置类型的序列,但最常见的是列表和元组,我们将在本教程中看到. 有一些事情,可以使用序列类型来做.这些操作包括索引,切片,加,乘,和检查成员运算.此外,Python已经有内置函数来 ...

最新文章

  1. UDP socket编程中使用connect
  2. 十二、爬了CSDN，我发现了这些
  3. Netty源码分析第5章(ByteBuf)----第5节: directArena分配缓冲区概述
  4. LeetCode 524. Longest Word in Dictionary through Deleting
  5. 上海三校生应用计算机考试试卷,三校生计算机考试试题.doc
  6. JQuery LazyLoad实现图片延迟加载-探究
  7. SAP MM TCODE
  8. dwg格式的计算机图,dwg是什么文件 怎么打开【图文】
  9. VT-x is disabled in BIOS错误解决
  10. 巧用Photoshop为透明玻璃杯抠图
  11. 学习编程太枯燥？12款助你学编程的免费游戏
  12. 小霸王推出可挖矿的VR眼镜，把IPFS、以太坊技术全用上了
  13. 段永平：你的“不投资”表现至少可以比85%的人好
  14. 《惢客创业日记》2018.12.25（周二）《惢客初心论》上篇
  15. Mybatis学习笔记——第一天
  16. 使用uDig进行简单的地图制图
  17. 爱丽丝性能服务器,《爱丽丝：疯狂回归》 修改AliceCompat.ini完全发挥CPU性能
  18. 工业级远距离无线传输装置的功能有哪些？
  19. Scan2CAD: Learning CAD Model Alignment in RGB-D Scans学习总结
  20. Html5钢琴块游戏制作（音乐游戏）

热门文章

  1. Flink算子(Filter、KeyBy、Reduce和Aggregate)
  2. js浏览器页面生命周期
  3. Netty的核心组件
  4. Linux下DMA添加两个channel,基于Linux嵌入式系统的ISA总线DMA的实现
  5. python资产管理系统_Python [5] IT资产管理（上）
  6. fscanf不读取_NCNN-Breakdown(3) 读取网络的proto信息
  7. oracle adg 人工干预,Oracle DataGuard
  8. django权限系统实现步骤_博主营地 | Unity红点系统如何实现？超全步骤分享
  9. Fluent Web API集成测试
  10. WPF——专用枚举器ListBox和ComboBox