Material Design Lite - Grids

Material Design Lite Grids - 从简单和简单的步骤学习Material Design Lite，从基本到高级概念，包括概述，环境设置，布局，网格，标签，页脚，徽章，按钮，卡片，进度条，旋转器，菜单，滑块，复选框，单选按钮，图标，开关，数据表，文本字段，工具提示。

Material Design Lite(MDL)网格是用于为不同屏幕尺寸布置内容的组件. MDL网格由容器/div元素定义和包含.网格在桌面大小屏幕中有12列，在平板电脑大小屏幕中有8列，在手机大小屏幕中有4列，其中每个大小都有预定义的边距和装订线.按顺序排列单元格按顺序排列，但以下情况除外:

如果a网格单元格不适合其中一个屏幕尺寸的行，它会流入下一行.
如果网格单元格的指定列大小相等大于或大于屏幕大小的列数，它占用整行.

MDL提供了各种CSS类来应用对网格的各种预定义的视觉和行为增强.下表列出了可用的类及其效果.

Sr.No.	Class Name&描述
1	mdl-layout 将容器标识为MDL组件.在外部容器元素上是必需的.
2	mdl-grid 将容器标识为MDL网格组件. "outer"div元素必需.
3	mdl-cell 将容器标识为MDL单元格. "内部"div元素必需.
4	mdl-grid - 无间距更新网格单元格它们之间没有余地.网格容器的可选项.
5	mdl-cell - N-col 这有助于列出列的大小cell to N，N为1-12，默认为4; "inner"div元素的可选项.
6	mdl-cell - N-col-desktop 这有助于把在桌面模式下，单元格的列大小为N，N为1-12(含); "inner"div元素的可选项.
7	mdl-cell - N-col-tablet 这有助于把仅在平板电脑模式下，单元格的列大小为N，N为1-8(含); "inner"div元素的可选项.
8	mdl-cell - N-col-phone 这有助于把仅在电话模式下，小区的列大小为N，N为1-4; "inner"div元素的可选项.
9	mdl-cell - hide-desktop 隐藏单元格桌面模式. "inner"div元素的可选项.
10	mdl-cell - hide-tablet 隐藏单元格平板电脑模式"inner"div元素的可选项.
11	mdl-cell - hide-phone 隐藏单元格手机模式. "inner"div元素的可选项.
12	mdl-cell - stretch 垂直拉伸单元格以填充父母，默认; "inner"div元素的可选项.
13	mdl-cell - top 将单元格对齐到顶部父母. "inner"div元素的可选项.
14	mdl-cell - mid 将单元格对齐到中间位置父母. "inner"div元素的可选项.
15	mdl-cell - bottom 将单元格对齐到底部父母. "inner"div元素的可选项.

示例

以下示例将帮助您了解使用mdl-grid类在各种屏幕上布局
内容.

下面给出的MDL类将用于此示例.

mdl-layout : 将div标识为MDL组件.
mdl-js-layout : 将基本MDL行为添加到外部div.
mdl-layout - fixed-header : 即使在小屏幕中也可以始终显示标题.
mdl-layout__header-row : 将容器标识为MDL标题行.
mdl-layout__drawer : 将div标识为MDL布局抽屉.
mdl-layout-title : 标识布局标题文本.
mdl-navigation : 将div标识为MDL导航组.
mdl-navigation__link : 将锚标识为MDL导航链接.
mdl-layout__content : 将div标识为MDL布局内容.
mdl-grid : 将div标识为MDL网格组件.
mdl-cell : 将div标识为MDL单元格.
mdl-cell - 1-col : 将单元格的列大小设置为桌面屏幕大小的12个单元格中的1个单元格的列大小.
mdl-cell - 2-col : 将单元格的列大小设置为桌面屏幕大小的12个单元格中的2个单元格.
mdl-cell - 4-col : 将单元格的列大小设置为桌面屏幕大小中12个单元格中4个单元格的列大小.
mdl-cell - 6-col : 将单元格的列大小设置为桌面屏幕大小的12个单元格中的6个单元格.
mdl-cell - 4-col - 电话 : 将单元格的列大小设置为手机屏幕大小的4个单元格中的4个单元格.
mdl-cell - 6-col -tablet : 将单元格的列大小设置为平板电脑屏幕大小的8个单元格中的6个单元格.
mdl-cell - 8-col -tablet : 将单元格的列大小设置为平板电脑屏幕大小的8个单元格中的8个单元格.

mdl_grid.htm

                                                                                                Material Design Grid

Material Design Tutorial

Home About

1 2 3 4 5 6 7 8 9 10 11 12

1 2 3

6 4 2

6 on desktop, 8 on tablet 4 on desktop, 6 on tablet 2 on desktop, 4 on phone