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个单元格.
<html> <head> <link rel = "stylesheet" href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css"> <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"> </script> <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <style> .graybox { background-color:#ddd; } </style> </head> <body> <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header"> <header class = "mdl-layout__header"> <div class = "mdl-layout__header-row"> <span class = "mdl-layout-title">Material Design Grid</span> </div> </header> <div class = "mdl-layout__drawer"> <span class = "mdl-layout-title">Material Design Tutorial</span> <nav class = "mdl-navigation"> <a class = "mdl-navigation__link" href = "">Home</a> <a class = "mdl-navigation__link" href = "">About</a> </nav> </div> <main class = "mdl-layout__content"> <div class = "mdl-grid"> <div class = "mdl-cell mdl-cell--1-col graybox">1</div> <div class = "mdl-cell mdl-cell--1-col graybox">2</div> <div class = "mdl-cell mdl-cell--1-col graybox">3</div> <div class = "mdl-cell mdl-cell--1-col graybox">4</div> <div class = "mdl-cell mdl-cell--1-col graybox">5</div> <div class = "mdl-cell mdl-cell--1-col graybox">6</div> <div class = "mdl-cell mdl-cell--1-col graybox">7</div> <div class = "mdl-cell mdl-cell--1-col graybox">8</div> <div class = "mdl-cell mdl-cell--1-col graybox">9</div> <div class = "mdl-cell mdl-cell--1-col graybox">10</div> <div class = "mdl-cell mdl-cell--1-col graybox">11</div> <div class = "mdl-cell mdl-cell--1-col graybox">12</div> </div> <div class = "mdl-grid"> <div class = "mdl-cell mdl-cell--4-col graybox">1</div> <div class = "mdl-cell mdl-cell--4-col graybox">2</div> <div class = "mdl-cell mdl-cell--4-col graybox">3</div> </div> <div class = "mdl-grid"> <div class = "mdl-cell mdl-cell--6-col graybox">6</div> <div class = "mdl-cell mdl-cell--4-col graybox">4</div> <div class = "mdl-cell mdl-cell--2-col graybox">2</div> </div> <div class = "mdl-grid"> <div class = "mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet graybox"> 6 on desktop, 8 on tablet</div> <div class = "mdl-cell mdl-cell--4-col mdl-cell--6-col-tablet graybox"> 4 on desktop, 6 on tablet</div> <div class = "mdl-cell mdl-cell--2-col mdl-cell--4-col-phone graybox"> 2 on desktop, 4 on phone</div> </div> </main> </div> </body> </html>