Material Design Lite 网格

2018-12-19 18:17 更新

Material Design Lite （MDL）电网是铺设内容不同屏幕尺寸的组件。该MDL网格由容器/ div元素定义和封闭。网格有桌面大小的屏幕12列，在平板电脑尺寸屏幕8,4在手机屏幕大小，每个尺寸都预定义的利润率和排水沟。cell在顺序的方式连续排列，顺序它们被定义，具有下列情况除外：

如果一个网格单元格不适合在屏幕尺寸中的一个排，流入下面的行。
如果网格单元具有一个指定列的大小等于或大于对屏幕尺寸的列数时，它占用了整个行。

的MDL提供各种CSS类的各种预定义的外观和行为的增强应用到电网。下表中提到的可用类和它们的影响。

SN	类名称和说明
1	MDL-布局标识的容器作为MDL的组成部分。需要外部容器元素。
2	MDL网要确定一个容器作为MDL网格组件。要求要“外”的div元素。
3	MDL-cell 要确定一个容器作为MDLcell。要求是在“内部”的div元素。
4	MDL网-无间距要更新网格单元有它们之间没有余量。可选网格容器。
五	MDL-cell- N-COL 把列大小的单元格N，N为1-12包容性的，默认为4;可选的“内部”的div元素。
6	MDL-cell- N-COL-桌面把列大小只在桌面模式下的单元格N，N为1-12包容性;可选的“内部”的div元素。
7	MDL-cell- N-COL-平板电脑把列大小仅在平板模式下的cellN，N为1-8包容性;可选的“内部”的div元素。
8	MDL-cell- N-COL-电话把列大小仅在电话模式中的cell为N，N为1-4包容;可选的“内部”的div元素。
9	MDL-cell-隐藏桌面若要隐藏桌面模式时，该单元格。可选的“内部”的div元素。
10	MDL-cell-隐藏平板电脑若要隐藏在平板模式下，当小区。可选的“内部”的div元素。
11	MDL-cell-隐藏电话若要隐藏在手机模式下的单元格。可选的“内部”的div元素。
12	MDL-cell-拉伸要垂直伸展cell填补了父母，默认值;可选的“内部”的div元素。
13	MDL-cell-顶到cell对齐到母体的顶部。可选的“内部”的div元素。
14	MDL-cell-中间到cell对齐到母体的中间。可选的“内部”的div元素。
15	MDL-cell-底部到cell对齐到母体的底部。可选的“内部”的div元素。

例

下面的例子展示了使用MDL-网格类的布局在各种屏幕上的内容。

这里使用以下MDL类。

MDL-布局 -标识的div作为MDL的组成部分。
MDL-JS-布局 -增加了基本的MDL行为外层div。
MDL布局-固定头 -使头始终可见，即使是在小屏幕。
MDL-layout__header行 -标识容器作为MDL标题行。
MDL-layout__drawer -标识DIV的布局MDL抽屉。
MDL-布局标题 -标识布局标题文本。
MDL-导航 -标识DIV的MDL导航组。
MDL-navigation__link -标识主播MDL导航链接。
MDL-layout__content -标识DIV的布局MDL内容。
MDL网 -识别DIV作为MDL网格组件。
MDL-cell -标识DIV的MDLcell。
MDL-cell- 1-COL -设置单元格的1单元的出桌面屏幕尺寸12格的列大小。
MDL-cell- 2-COL -设置单元格的2单元的出桌面屏幕尺寸12格的列大小。
MDL-cell- 4-COL -设置电池到4cell的出桌面屏幕尺寸12格的列大小。
MDL-cell- 6-COL -设置单元格的6芯出在台式机屏幕尺寸12单元格的列大小。
MDL-cell- 4-COL-电话 -设置在手机屏幕尺寸的单元到4格出4个单元的列大小。
MDL-cell- 6-COL-平板电脑 -设置单元格的6芯出8个cell在平板电脑屏幕大小的列大小。
MDL-cell- 8-COL-平板电脑 -设置单元格的8芯出8个cell在平板电脑屏幕大小的列大小。

mdl_grid.htm

<html>
   <head>
      <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css" rel="external nofollow" target="_blank" >
      <script src="https://atts.w3cschool.cn/attachments/tuploads/materialdesignlite/material.min.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" target="_blank" >
      <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>

结果

验证结果。

以上内容是否对您有帮助：

← Material Design Lite 布局

Material Design Lite 标签 →

写笔记

我要补充