Material Design Lite - 网格

上一页
下一页

Material Design Lite (MDL) 网格是一个用于在不同屏幕尺寸上布局内容的组件。MDL 网格由一个容器/div 元素定义和包围。网格在桌面尺寸屏幕上有 12 列，平板电脑尺寸屏幕上有 8 列，手机尺寸屏幕上有 4 列，每个尺寸都有预定义的边距和间距。单元格按顺序排列在一行中，按照定义的顺序排列，但以下情况除外

  • 如果网格单元格在一个屏幕尺寸的行中不合适，它会流到下一行。

  • 如果网格单元格的指定列大小等于或大于屏幕尺寸的列数，则它会占据整行。

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

序号 类名及描述
1

mdl-layout

将容器识别为 MDL 组件。外部容器元素上需要此类。
2

mdl-grid

将容器识别为 MDL 网格组件。在“外部”div 元素上需要此类。
3

mdl-cell

将容器识别为 MDL 单元格。在“内部”div 元素上需要此类。
4

mdl-grid--no-spacing

更新网格单元格，使其之间没有边距。网格容器可选。
5

mdl-cell--N-col

这有助于将单元格的列大小设置为 N，N 为 1-12（包括 1 和 12），默认为 4；“内部”div 元素可选。
6

mdl-cell--N-col-desktop

这有助于仅在桌面模式下将单元格的列大小设置为 N，N 为 1-12（包括 1 和 12）；“内部”div 元素可选。
7

mdl-cell--N-col-tablet

这有助于仅在平板电脑模式下将单元格的列大小设置为 N，N 为 1-8（包括 1 和 8）；“内部”div 元素可选。
8

mdl-cell--N-col-phone

这有助于仅在手机模式下将单元格的列大小设置为 N，N 为 1-4（包括 1 和 4）；“内部”div 元素可选。
9

mdl-cell--hide-desktop

在桌面模式下隐藏单元格。“内部”div 元素可选。
10

mdl-cell--hide-tablet

在平板电脑模式下隐藏单元格。“内部”div 元素可选。
11

mdl-cell--hide-phone

在手机模式下隐藏单元格。“内部”div 元素可选。
12

mdl-cell--stretch

垂直拉伸单元格以填充父元素，默认值；“内部”div 元素可选。
13

mdl-cell--top

将单元格与父元素的顶部对齐。“内部”div 元素可选。
14

mdl-cell--middle

将单元格与父元素的中间对齐。“内部”div 元素可选。
15

mdl-cell--bottom

将单元格与父元素的底部对齐。“内部”div 元素可选。

示例

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

以下 MDL 类将在此示例中使用。

  • mdl-layout − 将 div 识别为 MDL 组件。

  • mdl-js-layout − 为外部 div 添加基本 MDL 行为。

  • 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-phone − 将单元格的列大小设置为手机屏幕尺寸下 4 个单元格中的 4 个单元格。

  • mdl-cell--6-col-tablet − 将单元格的列大小设置为平板电脑屏幕尺寸下 8 个单元格中的 6 个单元格。

  • mdl-cell--8-col-tablet − 将单元格的列大小设置为平板电脑屏幕尺寸下 8 个单元格中的 8 个单元格。

mdl_grid.htm

实时演示 
<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>

结果

验证结果。

打印页面
上一页
下一页
广告