Material Design Lite - 快速指南

Material Design Lite - 概述

什么是 Material Design Lite？

Material Design Lite（MDL 是一个使用 CSS、JavaScript 和 HTML 创建的 UI 组件库。MDL UI 组件有助于构建有吸引力、一致且实用的网页和 Web 应用程序，同时遵循现代 Web 设计原则，如浏览器可移植性、设备独立性，以及优雅的降级。

以下是 Material Design Lite 的显着特征 -

内置响应式设计。
标准 CSS，占用空间最小。
包括新版本的常见用户界面控件，例如按钮、复选框和文本字段，这些控件经过调整以遵循 Material Design 概念。
包括增强和专门的功能，如卡片、列布局、滑块、旋转器、选项卡、版式等。
可以在有或没有任何库或开发环境的情况下使用。
跨浏览器，可用于创建可重用的 Web 组件。

响应式设计

Material Design Lite 具有内置的响应式设计，因此使用 Material Design Lite 创建的网站将根据设备尺寸重新设计。
Material Design Lite 类的创建方式使得网站可以适应任何屏幕尺寸。
使用Material Design Lite创建的网站与PC、平板电脑和移动设备完全兼容。

标准CSS

Material Design Lite 仅使用标准 CSS，非常容易学习。
不依赖任何外部 JavaScript 库，例如 jQuery。
ExtensibleMaterial Design Lite 的设计非常简约且扁平。
它的设计考虑到添加新的 CSS 规则比覆盖现有的 CSS 规则要容易得多。
它支持阴影和大胆的颜色。
颜色和色调在不同平台和设备上保持一致。

最重要的是，MDL 完全免费使用。

Material Design Lite - 环境设置

有两种使用 Material Design Lite 的方法 -

本地安装- 您可以在本地计算机上下载material.{primary}-{accent}.min.css 和material.min.js 文件并将其包含在HTML 代码中。
基于 CDN 的版本- 您可以将material.{primary}-{accent}.min.css 和material.min.js 文件直接从内容分发网络(CDN) 包含到您的HTML 代码中。

本地安装

请按照以下步骤安装 MDL -

转至https://www.getmdl.io/started/index.html下载可用的最新版本。
然后，将下载的material.min.js文件放在您网站的目录中，例如/js和/css中的material.min.css 。

例子

现在您可以将css和js文件包含在 HTML 文件中，如下所示 -

现场演示

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "material.min.css">
      <script src = "material.min.js"></script>
      <link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

上述程序将生成以下结果 -

基于CDN的版本

您可以直接从内容分发网络 (CDN) 将 js 和 css 文件包含到 HTML 代码中。storage.googleapis.com提供最新版本的内容。

在本教程中，我们使用该库的 storage.googleapis.com CDN 版本。

例子

现在，让我们使用 Google CDN 中的material.css 和material.js 重写上面的示例。

现场演示

<html>
   <head>
      <title>The Material Design Lite Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <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">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">Material Design</span>
            <nav class = "mdl-navigation">
               <a class = "mdl-navigation__link" href = "">Home</a>
               <a class = "mdl-navigation__link" href = "">Features</a>
               <a class = "mdl-navigation__link" href = "">About Us</a>
               <a class = "mdl-navigation__link" href = "">Log Out</a>
            </nav>
         </div>
         
         <main class = "mdl-layout__content">
            <div class = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

上述程序将生成以下结果 -

Material Design Lite - 布局

在本章中，我们将讨论 Material Design Lite 中的不同布局。HTML5 具有以下容器元素 -

<div> - 为 HTML 内容提供通用容器。
<header> - 表示标题部分。
<footer> - 表示页脚部分。
<article> - 代表文章。
<section> - 为各种类型的部分提供通用容器。

MDL 提供各种 CSS 类，以将各种预定义的视觉和Behave增强功能应用于容器。下表列出了可用的类别及其效果。

先生。	类名和描述
1	MDL 布局将容器标识为 MDL 组件。外部容器元件上需要。
2	mdl-js-布局将基本 MDL Behave添加到布局中。外部容器元件上需要。
3	MDL 布局__header 将容器标识为 MDL 组件。标题元素必需。
4	MDL 布局图标用于添加应用程序图标。如果菜单图标都可见，则被菜单图标覆盖。可选的图标元素。
5	MDL 布局__标题行将容器标识为 MDL 标题行。标头内容容器上必需的。
6	mdl-layout__标题标识布局标题文本。布局标题容器上必需的。
7	MDL 布局间隔用于对齐标题或抽屉内的元素。它会生长以填充剩余空间。通常用于将元素向右对齐。布局标题后面的 div 上可选。
8	MDL 导航将容器标识为 MDL 导航组。导航元素必需。
9	mdl-navigation__link 将锚点标识为 MDL 导航链接。头和/或抽屉锚元件需要。
10	MDL布局__抽屉将容器标识为 MDL 布局抽屉。抽屉容器元件需要。
11	MDL 布局__内容将容器标识为 MDL 布局内容。主要元素必需。
12	mdl-layout__header--滚动使标题随内容滚动。标题元素上可选。
13	mdl 布局--固定抽屉使抽屉始终可见并在更大的屏幕中打开。在外部容器元件上可选，但在抽屉容器元件上不可选。
14	mdl 布局--固定标题使标题始终可见，即使在小屏幕中也是如此。外部容器元件上可选。
15	mdl 布局--仅限大屏幕在较小的屏幕上隐藏元素。在 mdl-layout 的任何后代上都是可选的。
16	mdl 布局--仅限小屏幕在较大屏幕上隐藏元素。在 mdl-layout 的任何后代上都是可选的。
17 号	mdl-layout__header--瀑布允许具有多个标题行的“瀑布”效果。标题元素上可选。
18	mdl-layout__header--透明使标题透明并绘制在布局背景之上。标题元素上可选。
19	mdl-layout__header--接缝使用没有阴影的标题。标题元素上可选。
20	mdl 布局__tab 栏将容器标识为 MDL 选项卡栏。标题内的容器元素是必需的（选项卡式布局）。
21	mdl-layout__tab 将锚点标识为 MDL 选项卡链接。选项卡栏锚元素上必需的。
22	活跃将选项卡标识为默认活动选项卡。选项卡栏锚定元素和关联的选项卡部分元素上的可选。
23	MDL 布局__选项卡面板将容器标识为选项卡内容面板。选项卡部分元素必需。
24	mdl 布局--固定选项卡使用固定选项卡而不是默认的可滚动选项卡。外部容器元素上可选，而不是标头内的容器。

以下示例展示了如何使用 mdl-layout 类来设置各种容器的样式。

固定抽屉

要创建具有固定抽屉但没有标题的模板，请使用以下 MDL 类。

mdl-layout - 将 div 标识为 MDL 组件。
mdl-js-layout - 将基本的 MDL Behave添加到外部 div。
mdl-layout--fixed-drawer - 使抽屉始终可见并在较大的屏幕中打开。
mdl-layout__drawer - 将 div 标识为 MDL 布局抽屉。
mdl-layout-title - 标识布局标题文本。
mdl-navigation - 将 div 标识为 MDL 导航组。
mdl-navigation__link - 将锚点标识为 MDL 导航链接。
mdl-layout__content - 将 div 标识为 MDL 布局内容。

mdl_fixeddrawer.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">
   </head>
   
   <body>
      <!--  No header, and the drawer stays open on larger screens (fixed drawer).-->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content" style = "padding-left:100px;">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

固定标头

要创建具有固定标头的模板，请使用以下附加 MDL 类。

mdl-layout--fixed-header - 使标题始终可见，即使在小屏幕中也是如此。

mdl_fixedheader.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">
   </head>
   
   <body>
      <!-- Always shows a header, even in smaller screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

固定头和抽屉

要创建具有固定标题和固定抽屉的模板，需要使用以下附加 MDL 类。

mdl-layout--fixed-drawer - 使抽屉始终可见并在较大的屏幕中打开。
mdl-layout--fixed-header - 使标题始终可见，即使在小屏幕中也是如此。

mdl_fixedheader.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">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">Home</a>
                  <a class = "mdl-navigation__link" href = "" 
                     style = "color:gray">About</a>
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content">Hello World!</div>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

滚动标题

要创建带有滚动标题的模板，需要使用以下 MDL 类。

mdl-layout--header--scroll - 使标题随内容滚动。

mdl_scrollingheader.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">
   </head>
   
   <body>
      <!--  Uses a header that scrolls with the text, rather than 
         staying locked at the top -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--scroll">      
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

承包头

要创建一个标题随着页面向下滚动而收缩的模板，请使用以下 MDL 类。

mdl-layout__header--waterfall - 允许具有多个标题行的“瀑布”效果。

mdl_waterfallheader.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">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout ">
         <header class = "mdl-layout__header mdl-layout__header--waterfall">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>
               <!-- Add spacer, to align navigation to the right -->
               <div class = "mdl-layout-spacer"></div>
            </div>
            
            <!-- Bottom row, not visible on scroll -->
            <div class = "mdl-layout__header-row">
               <div class = "mdl-layout-spacer"></div>
               <!-- Navigation -->
               <nav class = "mdl-navigation">
                  <a class = "mdl-navigation__link" href = "">Home</a>
                  <a class = "mdl-navigation__link" href = "">About</a>      
               </nav>
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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 = "page-content" style = "padding-left:100px;">Hello World!
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
               <br/><br/><br/><br/><br/><br/><br/><br/>...
            </div>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

带有可滚动选项卡的固定标题

要创建带有可滚动选项卡的标题的模板，请使用以下 MDL 类。

mdl-layout__tab-bar - 将容器标识为 MDL 选项卡栏。
mdl-layout__tab - 将锚点标识为 MDL 选项卡链接。
mdl-layout__tab-panel - 将容器标识为选项卡内容面板。

mdl_scrollabletabheader.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">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

带有固定选项卡的固定标题

要创建带有固定选项卡的标题的模板，需要使用以下附加 MDL 类。

mdl-layout--fixed-tabs - 使用固定选项卡而不是默认的可滚动选项卡。

mdl_fixedtabheader.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">
   </head>
   
   <body>
      <!-- The drawer is always open in large screens. The header is always 
         shown, even in small screens. -->
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs">
         <header class = "mdl-layout__header">
            <!-- Top row, always visible -->
            <div class = "mdl-layout__header-row">
               <!-- Title -->
               <span class = "mdl-layout-title">HTML5 Tutorial</span>          
            </div>
         
            <!-- Tabs -->
            <div class = "mdl-layout__tab-bar mdl-js-ripple-effect">
               <a href = "#scroll-tab-1" class = "mdl-layout__tab is-active">Tab 1</a>
               <a href = "#scroll-tab-2" class = "mdl-layout__tab">Tab 2</a>
               <a href = "#scroll-tab-3" class = "mdl-layout__tab">Tab 3</a>     
            </div>
         </header>
         
         <div class = "mdl-layout__drawer">
            <span class = "mdl-layout-title">HTML5 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">
            <section class = "mdl-layout__tab-panel is-active" id = "scroll-tab-1">
               <div class = "page-content">Tab 1 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-2">
               <div class = "page-content">Tab 2 Contents</div>
            </section>
            <section class = "mdl-layout__tab-panel" id = "scroll-tab-3">
               <div class = "page-content">Tab 3 Contents</div>
            </section>
         </main>
      </div>
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 网格

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

如果网格单元格不适合某一屏幕尺寸的行，它将流入下一行。
如果网格单元格的指定列大小等于或大于屏幕大小的列数，则它会占据整行。

MDL 提供各种 CSS 类，以将各种预定义的视觉和Behave增强应用于网格。下表列出了可用的类别及其效果。

先生。	类名和描述
1	MDL 布局将容器标识为 MDL 组件。外部容器元件上需要。
2	MDL-网格将容器标识为 MDL 网格组件。“外部”div 元素必需。
3	MDL细胞将容器标识为 MDL 单元。“内部”div 元素必需。
4	mdl-网格--无间距更新网格单元以使其之间没有边距。网格容器可选。
5	mdl-细胞--N-col 这有助于将单元格的列大小设置为 N，N 为 1-12（含），默认为 4；对于“内部”div 元素是可选的。
6	mdl-cell--N-col-桌面这有助于仅在桌面模式下将单元格的列大小设置为 N，N 为 1-12（含）；对于“内部”div 元素是可选的。
7	mdl-细胞--N-col-片剂这有助于仅在平板电脑模式下将单元格的列大小设置为 N，N 为 1-8（含）；对于“内部”div 元素是可选的。
8	mdl-cell--N-col-phone 这有助于仅在电话模式下将单元格的列大小设置为 N，N 为 1-4（含）；对于“内部”div 元素是可选的。
9	mdl-cell--隐藏桌面在桌面模式下隐藏单元格。对于“内部”div 元素是可选的。
10	mdl-cell--隐藏平板电脑在平板电脑模式下隐藏单元格。对于“内部”div 元素是可选的。
11	mdl-cell--隐藏电话处于电话模式时隐藏单元格。对于“内部”div 元素是可选的。
12	mdl-细胞--拉伸垂直拉伸单元格以填充父级，默认；对于“内部”div 元素是可选的。
13	mdl-细胞--顶部将单元格与父级的顶部对齐。对于“内部”div 元素是可选的。
14	mdl-细胞--中间将单元格与父单元格的中间对齐。对于“内部”div 元素是可选的。
15	MDL-单元格--底部将单元格与父级的底部对齐。对于“内部”div 元素是可选的。

例子

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

本示例将使用下面给出的 MDL 类。

mdl-layout - 将 div 标识为 MDL 组件。
mdl-js-layout - 将基本的 MDL Behave添加到外部 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-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>

结果

验证结果。

Material Design Lite - 选项卡

Material Design Lite (MDL) 选项卡组件是一个用户界面组件，有助于以独占方式在单个空间中显示多个屏幕。

MDL 提供各种 CSS 类，以将各种预定义的视觉和Behave增强功能应用于选项卡。下表提到了可用的类别及其效果。

先生。	类名和描述
1	MDL 布局将容器标识为 MDL 组件。外部容器元件上需要。
2	MDL 选项卡将选项卡容器标识为 MDL 组件。“外部”div 元素必需。
3	mdl-js-选项卡将基本 MDL Behave设置为选项卡容器。“外部”div 元素必需。
4	mdl-js-涟漪效应为选项卡链接添加波纹点击效果。选修的; 继续“外部”div 元素。
5	mdl-tabs__tab-bar 将容器标识为 MDL 选项卡链接栏。第一个“内部”div 元素需要。
6	mdl-tabs__tab 将锚点（链接）标识为 MDL 选项卡激活器。第一个“内部”div 元素中的所有链接都是必需的。
7	活跃将选项卡标识为默认显示选项卡。在一个（且仅一个）“内部”div（选项卡）元素上是必需的。
8	mdl-tabs__面板将容器标识为选项卡内容。每个“内部”div（选项卡）元素都是必需的。

例子

以下示例将帮助您了解如何使用 mdl-tab 类在各种选项卡上布局内容。

下面给出的 MDL 类将在本例中使用 -

mdl-layout - 将 div 标识为 MDL 组件。
mdl-js-layout - 将基本的 MDL Behave添加到外部 div。
mdl-layout--fixed-header - 使标题始终可见，即使在小屏幕中也是如此。
mdl-layout__header-row - 将容器标识为 MDL 标题行。
mdl-layout-title - 标识布局标题文本。
mdl-layout__content - 将 div 标识为 MDL 布局内容。
mdl-tabs - 将选项卡容器标识为 MDL 组件。
mdl-js-tabs - 将基本 MDL Behave设置为选项卡容器。
mdl-tabs__tab-bar - 将容器标识为 MDL 选项卡链接栏。
mdl-tabs__tab - 将锚点（链接）标识为 MDL 选项卡激活器。
is-active - 将选项卡标识为默认显示选项卡。
mdl-tabs__panel - 将容器标识为选项卡内容。

mdl_tabs.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">
   </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 Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <div class = "mdl-tabs mdl-js-tabs">
               <div class = "mdl-tabs__tab-bar">
                  <a href = "#tab1-panel" class = "mdl-tabs__tab is-active">Tab 1</a>
                  <a href = "#tab2-panel" class = "mdl-tabs__tab">Tab 2</a>
                  <a href = "#tab3-panel" class = "mdl-tabs__tab">Tab 3</a>
               </div>
            
               <div class = "mdl-tabs__panel is-active" id = "tab1-panel">
                  <p>Tab 1 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab2-panel">
                  <p>Tab 2 Content</p>
               </div>
            
               <div class = "mdl-tabs__panel" id = "tab3-panel">
                  <p>Tab 3 Content</p>
               </div>
            </div>
         </main>
      </div>  
   </body>
</html>

结果

验证结果。

Material Design Lite - 页脚

MDL 页脚组件有两种主要形式：大型页脚和迷你页脚。大型页脚包含比迷你页脚更复杂的内容。大型页脚可以表示由水平线分隔的多个内容部分，而迷你页脚则表示单个内容部分。页脚通常包含信息性内容和可点击内容，例如链接。

MDL 提供各种 CSS 类，以将各种预定义的视觉和Behave增强功能应用于大型页脚和小型页脚。下表列出了可用的类别及其效果。

先生。	类名和描述
1	MDL 巨型页脚将容器标识为 MDL 巨型页脚组件。页脚元素必需。
2	mdl-mega-footer__top-section 将容器标识为页脚顶部部分。顶部“外部”div 元素必需的。
3	mdl-mega-footer__left-section 将容器标识为左侧部分。左侧部分“内部”div 元素必需的。
4	MDL-mega-footer__social-btn 标识巨型页脚内的装饰方块。按钮元素必需（如果使用）。
5	mdl-mega-footer__right-section 将容器标识为正确的部分。右部分“内部”div 元素必需的。
6	mdl-mega-footer__中间部分将容器标识为页脚中间部分。中间部分“外部”div 元素必需的。
7	mdl-mega-footer__下拉部分将容器标识为下拉（垂直）内容区域。下拉“内部”div 元素必需。
8	mdl-mega-footer__标题将标题标识为大型页脚标题。下拉部分内的 h1 元素是必需的。
9	mdl-mega-footer__链接列表将无序列表标识为下拉（垂直）列表。下拉部分内的 ul 元素是必需的。
10	mdl-mega-footer__底部部分将容器标识为页脚底部部分。底部“外部”div 元素必需的。
11	MDL 标志将容器标识为样式化的节标题。大型页脚底部或小型页脚左侧部分中的“内部”div 元素是必需的。
12	MDL 迷你页脚将容器标识为 MDL 迷你页脚组件。页脚元素必需。
13	mdl-迷你页脚__left-section 将容器标识为左侧部分。左侧部分“内部”div 元素必需的。
14	mdl-mini-footer__链接列表将无序列表标识为内联（水平）列表。ul 元素与“mdl-logo”div 元素同级是必需的。
15	mdl-迷你页脚__right-section 将容器标识为正确的部分。右部分“内部”div 元素必需的。
16	MDL-迷你页脚__social-btn 标识迷你页脚内的装饰方块。按钮元素必需（如果使用）。

现在，让我们看几个示例来了解如何使用 MDL 页脚类来设置页脚样式。

巨型页脚

让我们讨论如何使用mdl-mega-footer类来布局页脚中的内容。本示例中将使用以下 MDL 类。

mdl-layout - 将 div 标识为 MDL 组件。
mdl-js-layout - 将基本的 MDL Behave添加到外部 div。
mdl-layout--fixed-header - 使标题始终可见，即使在小屏幕中也是如此。
mdl-layout__header-row - 将容器标识为 MDL 标题行。
mdl-layout-title - 标识布局标题文本。
mdl-layout__content - 将 div 标识为 MDL 布局内容。
mdl-mega-footer - 将容器标识为 MDL 巨型页脚组件。
mdl-mega-footer__top-section - 将容器标识为页脚顶部部分。
mdl-mega-footer__left-section - 将容器标识为左侧部分。
mdl-mega-footer__social-btn - 标识迷你页脚内的装饰方块。
mdl-mega-footer__right-section - 将容器标识为右部分。
mdl-mega-footer__middle-section - 将容器标识为页脚中间部分。
mdl-mega-footer__drop-down-section - 将容器标识为下拉（垂直）内容区域。
mdl-mega-footer__heading - 将标题标识为大型页脚标题。
mdl-mega-footer__link-list - 将无序列表标识为内联（水平）列表。
mdl-mega-footer__bottom-section - 将容器标识为页脚底部部分。
mdl-logo - 将容器标识为样式部分标题。

mdl_megafooter.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">
   </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 Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

结果

验证结果。

迷你页脚

以下示例将帮助您了解如何使用mdl-mini-footer类来布局页脚中的内容。

本示例将使用下面给出的 MDL 类。

mdl-layout - 将 div 标识为 MDL 组件。
mdl-js-layout - 将基本的 MDL Behave添加到外部 div。
mdl-layout--fixed-header - 使标题始终可见，即使在小屏幕中也是如此。
mdl-layout__header-row - 将容器标识为 MDL 标题行。
mdl-layout-title - 标识布局标题文本。
mdl-layout__content - 将 div 标识为 MDL 布局内容。
mdl-mini-footer - 将容器标识为 MDL 迷你页脚组件。
mdl-mini-footer__left-section - 将容器标识为左侧部分。
mdl-logo - 将容器标识为样式化的节标题。
mdl-mini-footer__link-list - 将无序列表标识为内联（水平）列表。
mdl-mini-footer__right-section - 将容器标识为右部分。

mdl_minifooter.htm

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/