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。
可扩展性 Material Design Lite 本身设计非常简洁和扁平化。
它的设计考虑到了添加新的 CSS 规则比覆盖现有的 CSS 规则更容易的事实。
它支持阴影和大胆的色彩。
颜色和色调在各个平台和设备上保持一致。

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

Material Design Lite - 环境搭建

使用 Material Design Lite 有两种方法：

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

本地安装

按照以下步骤安装 MDL：

访问 https://www.getmdl.io/started/index.html 下载最新版本。
然后，将下载的 **material.min.js** 文件放在你的网站目录中，例如 /js，并将 **material.min.css** 文件放在 /css 目录中。

示例

现在，你可以按如下方式在你的 HTML 文件中包含 *css* 和 *js* 文件：

在线演示

<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 类，用于将各种预定义的视觉和行为增强应用于容器。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-layout 将容器标识为 MDL 组件。外层容器元素需要此类。
2	mdl-js-layout 向布局添加基本的 MDL 行为。外层容器元素需要此类。
3	mdl-layout__header 将容器标识为 MDL 组件。页眉元素需要此类。
4	mdl-layout-icon 用于添加应用程序图标。如果两者都可见，则会被菜单图标覆盖。可选图标元素。
5	mdl-layout__header-row 将容器标识为 MDL 页眉行。页眉内容容器需要此类。
6	mdl-layout__title 标识布局标题文本。布局标题容器需要此类。
7	mdl-layout-spacer 用于对齐页眉或抽屉内的元素。它会增长以填充剩余空间。通常用于将元素右对齐。布局标题后面的 div 上可选。
8	mdl-navigation 将容器标识为 MDL 导航组。nav 元素需要此类。
9	mdl-navigation__link 将锚点标识为 MDL 导航链接。页眉和/或抽屉锚元素需要此类。
10	mdl-layout__drawer 将容器标识为 MDL 布局抽屉。抽屉容器元素需要此类。
11	mdl-layout__content 将容器标识为 MDL 布局内容。主元素需要此类。
12	mdl-layout__header--scroll 使页眉随内容滚动。页眉元素上可选。
13	mdl-layout--fixed-drawer 使抽屉始终可见并在较大屏幕上打开。外层容器元素上可选，而不是抽屉容器元素上。
14	mdl-layout--fixed-header 使页眉始终可见，即使在小屏幕上也是如此。外层容器元素上可选。
15	mdl-layout--large-screen-only 在较小屏幕上隐藏元素。mdl-layout 的任何子元素上可选。
16	mdl-layout--small-screen-only 在大屏幕上隐藏元素。mdl-layout 的任何子元素上可选。
17	mdl-layout__header--waterfall 允许使用多行页眉的“瀑布”效果。页眉元素上可选。
18	mdl-layout__header--transparent 使页眉透明并在布局背景之上绘制。页眉元素上可选。
19	mdl-layout__header--seamed 使用没有阴影的页眉。页眉元素上可选。
20	mdl-layout__tab-bar 将容器标识为 MDL 标签栏。页眉内（选项卡式布局）的容器元素需要此类。
21	mdl-layout__tab 将锚点标识为 MDL 标签链接。标签栏锚元素需要此类。
22	is-active 将标签标识为默认活动标签。标签栏锚元素和关联的标签部分元素上可选。
23	mdl-layout__tab-panel 将容器标识为标签内容面板。标签部分元素需要此类。
24	mdl-layout--fixed-tabs 使用固定标签而不是默认的可滚动标签。外层容器元素上可选，而不是页眉内的容器。

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

固定抽屉

要创建具有固定抽屉但没有页眉的模板，可以使用以下 MDL 类。

**mdl-layout** - 将 div 标识为 MDL 组件。
**mdl-js-layout** - 向外层 div 添加基本的 MDL 行为。
**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 类，用于将各种预定义的视觉和行为增强应用于网格。下表列出了可用的类及其效果。

序号	类名及描述
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>

结果

验证结果。

Material Design Lite - 标签页

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

MDL 提供各种 CSS 类，可将各种预定义的视觉和行为增强应用于标签页。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-layout 将容器标识为 MDL 组件。外层容器元素需要此类。
2	mdl-tabs 将标签页容器标识为 MDL 组件。“外部”div 元素必需。
3	mdl-js-tabs 为标签页容器设置基本的 MDL 行为。“外部”div 元素必需。
4	mdl-js-ripple-effect 为标签页链接添加涟漪点击效果。可选；位于“外部”div 元素上。
5	mdl-tabs__tab-bar 将容器标识为 MDL 标签页链接栏。第一个“内部”div 元素必需。
6	mdl-tabs__tab 将锚点（链接）标识为 MDL 标签页激活器。第一个“内部”div 元素中的所有链接都必需。
7	is-active 将标签页标识为默认显示标签页。“内部”div（标签页）元素中的一个（且只有一个）必需。
8	mdl-tabs__panel 将容器标识为标签页内容。每个“内部”div（标签页）元素都必需。

示例

以下示例将帮助您理解如何使用 mdl-tab 类在各种标签页上布局内容。

本示例中将使用以下 MDL 类：

**mdl-layout** - 将 div 标识为 MDL 组件。
**mdl-js-layout** - 向外层 div 添加基本的 MDL 行为。
**mdl-layout--fixed-header** - 使页眉始终可见，即使在小屏幕上也是如此。
mdl-layout__header-row − 将容器标识为 MDL 头部行。
**mdl-layout-title** - 标识布局标题文本。
**mdl-layout__content** - 将 div 标识为 MDL 布局内容。
mdl-tabs − 将标签页容器标识为 MDL 组件。
mdl-js-tabs − 为标签页容器设置基本的 MDL 行为。
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 类，可将各种预定义的视觉和行为增强应用于大型页脚和小型页脚。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-mega-footer 将容器标识为 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__middle-section 将容器标识为页脚中间部分。“外部”div 元素必需。
7	mdl-mega-footer__drop-down-section 将容器标识为下拉（垂直）内容区域。“内部”div 元素必需。
8	mdl-mega-footer__heading 将标题标识为大型页脚标题。下拉部分内的 h1 元素必需。
9	mdl-mega-footer__link-list 将无序列表标识为下拉（垂直）列表。下拉部分内的 ul 元素必需。
10	mdl-mega-footer__bottom-section 将容器标识为页脚底部部分。“外部”div 元素必需。
11	mdl-logo 将容器标识为样式化的部分标题。大型页脚底部部分或小型页脚左侧部分中的“内部”div 元素必需。
12	mdl-mini-footer 将容器标识为 MDL 小型页脚组件。页脚元素必需。
13	mdl-mini-footer__left-section 将容器标识为左侧部分。“内部”div 元素必需。
14	mdl-mini-footer__link-list 将无序列表标识为内联（水平）列表。“mdl-logo”div 元素的同级 ul 元素必需。
15	mdl-mini-footer__right-section 将容器标识为右侧部分。“内部”div 元素必需。
16	mdl-mini-footer__social-btn 标识小型页脚中的装饰性方块。按钮元素（如果使用）必需。

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

大型页脚

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

**mdl-layout** - 将 div 标识为 MDL 组件。
**mdl-js-layout** - 向外层 div 添加基本的 MDL 行为。
**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** - 向外层 div 添加基本的 MDL 行为。
**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/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-mini-footer">
               <div class = "mdl-mini-footer__left-section">
                  <div class = "mdl-logo">
                     Copyright Information
                  </div>
                  <ul class = "mdl-mini-footer__link-list">
                     <li><a href = "#">Help</a></li>
                     <li><a href = "#">Privacy and Terms</a></li>
                     <li><a href = "#">User Agreement</a></li>
                  </ul>
               </div>
               
               <div class = "mdl-mini-footer__right-section">
                  <button class = "mdl-mini-footer__social-btn">1</button>
                  <button class = "mdl-mini-footer__social-btn">2</button>
                  <button class = "mdl-mini-footer__social-btn">3</button>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

结果

验证结果。

Material Design Lite - 徽章

MDL 徽章组件是一个屏幕上的通知，可以是数字或图标。它通常用于强调项目数量。

MDL 提供一系列 CSS 类，可将各种预定义的视觉和行为增强应用于徽章。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-badge 将元素标识为 MDL 徽章组件。span 或链接元素必需。
2	mdl-badge--no-background 为徽章应用开环效果，可选。
3	mdl-badge--overlap 使徽章与它的容器重叠，可选。
4	data-badge="value" 为用作属性的徽章分配字符串值；span 或链接上必需。

示例

以下示例将帮助您理解如何使用mdl-badge类向 span 和链接元素添加通知。

本示例中将使用以下 MDL 类。

mdl-badge − 将元素标识为 MDL 徽章组件。
data-badge − 为徽章分配字符串值。可以使用 HTML 符号为其分配图标。

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

结果

验证结果。

Material Design Lite - 按钮

MDL 提供一系列 CSS 类，可将各种预定义的视觉和行为增强应用于按钮。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-button 将按钮设置为 MDL 组件，必需。
2	mdl-js-button 为按钮添加基本的 MDL 行为，必需。
3	(无) 为按钮设置平面显示效果，默认值。
4	mdl-button--raised 设置凸起显示效果；这与 fab、mini-fab 和 icon 互斥。
5	mdl-button--fab 设置 fab（圆形）显示效果；这与 raised、mini-fab 和 icon 互斥。
6	mdl-button--mini-fab 设置 mini-fab（小型 fab 圆形）显示效果；这与 raised、fab 和 icon 互斥。
7	mdl-button--icon 设置图标（小的纯圆形）显示效果；这与 raised、fab 和 mini-fab 互斥。
8	mdl-button--colored 设置彩色显示效果，颜色在 material.min.css 中定义。
9	mdl-button--primary 设置主色调显示效果，颜色在 material.min.css 中定义。
10	mdl-button--accent 设置强调色显示效果，颜色在 material.min.css 中定义。
11	mdl-js-ripple-effect 设置点击水波纹效果，可以与任何其他类一起使用。

示例

下面的例子将帮助你理解如何使用mdl-button类来显示不同类型的按钮。

mdl_buttons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table border = "0">
         <tbody>
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Colored fab (circular) display effect</td>
               <td>Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Plain fab (circular) display effect</td>
               <td>Plain fab (circular) with ripple display effect</td>
               <td>Plain fab (circular) and disabled</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Raised button</td>
               <td>Raised button with ripple display effect</td>
               <td>Raised button and disabled</td>
            </tr>
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Colored Raised button</td>
               <td>Accent-colored Raised button</td>
               <td>Accent-colored raised button with ripple effect</td>
            </tr>				
            
            <tr>
               <td><button class = "mdl-button mdl-js-button">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-js-ripple-effect">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button" disabled>
                  <i class = "material-icons">add</i></button></td>
            </tr>
            
            <tr>
               <td>Flat button</td>
               <td>Flat button with ripple effect</td>
               <td>Disabled flat button</td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--primary">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--accent">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Primary Flat button</td>
               <td>Accent-colored Flat button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--icon mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Icon button</td>
               <td>Colored Icon button</td>
               <td> </td>
            </tr>	
            
            <tr>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab">
                  <i class = "material-icons">add</i></button></td>
               <td><button class = "mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored">
                  <i class = "material-icons">add</i></button></td>
               <td> </td>
            </tr>
            
            <tr>
               <td>Mini Colored fab (circular) display effect</td>
               <td>Mini Colored fab (circular) with ripple display effect</td>
               <td> </td>
            </tr>			
         </tbody>
      </table>
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 卡片

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的卡片。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-card 将 div 元素标识为 MDL 卡片容器，“外层” div 必须使用此类。
2	mdl-card--border 为应用它的卡片部分添加边框，用于“内层”div。
3	mdl-shadow--2dp 到 mdl-shadow--16dp 为卡片设置可变的阴影深度 (2, 3, 4, 6, 8 或 16)，可选，用于“外层”div；如果省略，则不显示阴影。
4	mdl-card__title 将 div 标识为卡片标题容器，“内层”标题 div 必须使用此类。
5	mdl-card__title-text 为卡片标题设置合适的文本特性，标题 div 内的标题标签 (H1 - H6) 必须使用此类。
6	mdl-card__subtitle-text 为卡片副标题设置文本特性，可选。它应该是标题元素的子元素。
7	mdl-card__media 将 div 标识为卡片媒体容器，“内层”媒体 div 必须使用此类。
8	mdl-card__supporting-text 将 div 标识为卡片正文文本容器，并为正文文本分配合适的文本特性，“内层”正文文本 div 必须使用此类；文本直接放在 div 内，无需中间容器。
9	mdl-card__actions 将 div 标识为卡片操作容器，并为操作文本分配合适的文本特性，“内层”操作 div 必须使用此类；内容直接放在 div 内，无需中间容器。

示例

下面的例子将帮助你理解如何使用 mdl-tooltip 类来显示不同类型的工具提示。

mdl_cards.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
   
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family = Material+Icons"> 
      <style>
         .wide-card.mdl-card {
            width: 512px;
         }
      
         .square-card.mdl-card {
            width: 256px;
            height: 256px;
         }

         .image-card.mdl-card {
            width: 256px;
            height: 256px;   
            background: url('html5-mini-logo.jpg') center / cover;          
         }       
      
         .image-card-image__filename {
            color: #000;
            font-size: 14px;
            font-weight: bold;
         }

         .event-card.mdl-card {
            width: 256px;
            height: 256px;
            background: #3E4EB8;
         }
      
         .event-card.mdl-card__title {
            color: #fff;
            height: 176px;
         }

         .event-card > .mdl-card__actions {
            border-color: rgba(255, 255, 255, 0.2);
            display: flex;
            box-sizing:border-box;
            align-items: center;
            color: #fff;
         }     
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Wide Card with Share Button</td><td>Square Card</td></tr>
         <tr>
            <td>
               <div class = "wide-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
               
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                     <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         
            <td>
               <div class = "square-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title">
                     <h2 class = "mdl-card__title-text">H5</h2>
                  </div>
               
                  <div class = "mdl-card__supporting-text">
                     HTML5 is the next major revision of the HTML standard 
                     superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. 
                     HTML5 is a standard for structuring and presenting 
                     content on the World Wide Web.
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Learn HTML5</a>
                  </div>
               
                  <div class = "mdl-card__menu">
                     <button class = "mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                        <i class = "material-icons">share</i></button>
                  </div>
               </div>
            </td>
         </tr>
            
         <tr><td>Image Card</td><td>Event Card</td></tr>
         <tr>
            <td>
               <div class = "image-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand"></div>
                  <div class = "mdl-card__actions">
                     <span class = "image-card-image__filename">html5-logo.jpg</span>
                  </div>
               </div>
            </td>
            
            <td>
               <div class = "event-card mdl-card mdl-shadow--2dp">
                  <div class = "mdl-card__title mdl-card--expand">
                     <h4>HTML 5 Webinar:<br/>June 14, 2016<br/>7 - 11 pm IST</h4>
                  </div>
                  <div class = "mdl-card__actions mdl-card--border">
                     <a class = "mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
                        Add to Calendar</a>
                     <div class = "mdl-layout-spacer"></div>
                     <i class = "material-icons">event</i>
                  </div>
               </div>
            </td>
         </tr>          
      </table>   
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 进度条

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的进度条。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-js-progress 为进度指示器设置基本的 MDL 行为，这是必需的类。
2	mdl-progress__indeterminate 为进度指示器设置动画，这是一个可选类。

序号

类名及描述

mdl-js-progress

为进度指示器设置基本的 MDL 行为，这是必需的类。

mdl-progress__indeterminate

为进度指示器设置动画，这是一个可选类。

示例

下面的例子将帮助你理解如何使用mdl-js-progress类来显示不同类型的进度条。

mdl_progressbars.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Progress bar</h4>
      <div id = "progressbar1" class = "mdl-progress mdl-js-progress"></div>
      <h4>Indeterminate Progress bar</h4>
      <div id = "progressbar2" 
         class = "mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
      <h4>Buffering Progress bar</h4>
      <div id = "progressbar3" class = "mdl-progress mdl-js-progress"></div>
      
      <script language = "javascript">
         document.querySelector('#progressbar1').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(44);
         });
         document.querySelector('#progressbar3').addEventListener('mdl-componentupgraded', 
            function() {
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(87);
         });
      </script>
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 加载动画

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的加载动画。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-spinner 将容器标识为 MDL 加载动画组件，这是必需的类。
2	mdl-js-spinner 为加载动画设置基本的 MDL 行为，这是必需的类。
3	is-active 显示并动画加载动画，可选。
4	mdl-spinner--single-color 使用单一颜色而不是更改颜色，可选。

示例

下面的例子将帮助你理解如何使用mdl-spinner类以及不同类型的加载动画。

mdl_spinners.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <h4>Default Spinner</h4>
      <div class = "mdl-spinner mdl-js-spinner is-active"></div>
      <h4>Single Color Spinner</h4>
      <div class = "mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>
   </body>
</html>

结果

验证结果。

Material Design Lite - 菜单

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的菜单。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-button 将按钮标识为 MDL 组件，按钮元素必须使用此类。
2	mdl-js-button 为按钮设置基本的 MDL 行为，按钮元素必须使用此类。
3	mdl-button--icon 为按钮设置图标，按钮元素必须使用此类。
4	material-icons 将 span 标识为材质图标，内联元素必须使用此类。
5	mdl-menu 将无序列表容器标识为 MDL 组件，ul 元素必须使用此类。
6	mdl-js-menu 为菜单设置基本的 MDL 行为，ul 元素必须使用此类。
7	mdl-menu__item 将按钮标识为 MDL 菜单选项并设置基本的 MDL 行为，列表项元素必须使用此类。
8	mdl-js-ripple-effect 为选项链接设置点击水波纹效果，可选；无序列表元素必须使用此类。
9	mdl-menu--top-left 将菜单位置设置为按钮上方，将菜单的左边缘与按钮对齐，可选；无序列表元素必须使用此类。
10	(无) 默认情况下，菜单位于按钮下方，与按钮的左边缘对齐。
11	mdl-menu--top-right 菜单位于按钮上方，与按钮的右边缘对齐，可选，用于无序列表元素。
12	mdl-menu--bottom-right 菜单位于按钮下方，与按钮的右边缘对齐，可选，用于无序列表元素。

示例

下面的例子将帮助你理解如何使用mdl-spinner类来显示不同类型的加载动画。

mdl_menu.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <style>
         .container {
            position: relative;
            width: 200px;
         }

         .background {
            background: white;
            height: 148px;
            width: 100%;
         }

         .bar {
            box-sizing: border-box;
            background: #BBBBBB;
            color: white;
            width: 100%;
            height: 64px;
            padding: 16px;
         }

         .wrapper {
            box-sizing: border-box;
            position: absolute;
            right: 16px;
         }
      </style>
   </head>
   
   <body>
      <table>
         <tr><td>Lower Left Menu</td><td>Lower Right Menu</td><td>Top Left Menu</td>
            <td>Top Right Menu</td></tr>
         <tr>
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">    
                     <button id = "demo_menu-lower-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-lower-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-lower-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-lower-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>     
                        </ul>
                     </div>
                  </div>
                  <div class = "background"></div>
               </div>
            </td>
            
            <td>
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">    
                     <button id = "demo_menu-top-left" 
                        class = "mdl-button mdl-js-button mdl-button--icon" 
                        data-upgraded = ",MaterialButton">
                        <i class = "material-icons">more_vert</i>
                     </button>
                     <ul class = "mdl-menu mdl-menu--top-left mdl-js-menu mdl-js-ripple-effect"
                        for = "demo_menu-top-left">
                        <li class = "mdl-menu__item">Item #1</li>
                        <li class = "mdl-menu__item">Item #2</li>
                        <li disabled class = "mdl-menu__item">Disabled Item</li>     
                     </ul>        
                  </div>         
               </div>
            </td>
            
            <td>     
               <div class = "container mdl-shadow--2dp">
                  <div class = "background"></div>
                  <div class = "bar">
                     <div class = "wrapper">     
                        <button id = "demo_menu-top-right" 
                           class = "mdl-button mdl-js-button mdl-button--icon" 
                           data-upgraded = ",MaterialButton">
                           <i class = "material-icons">more_vert</i>
                        </button>
                        <ul class = "mdl-menu mdl-menu--top-right mdl-js-menu mdl-js-ripple-effect"
                           for = "demo_menu-top-right">
                           <li class = "mdl-menu__item">Item #1</li>
                           <li class = "mdl-menu__item">Item #2</li>
                           <li disabled class = "mdl-menu__item">Disabled Item</li>
                        </ul>
                     </div>
                  </div>
               </div>
            </td>

         </tr>
      </table>
   </body>
</html>

结果

验证结果。

Material Design Lite - 滑块

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的菜单。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-slider 将输入元素标识为 MDL 组件，这是必需的。
2	mdl-js-slider 为输入元素设置基本的 MDL 行为，这是必需的。

序号

类名及描述

mdl-slider

将输入元素标识为 MDL 组件，这是必需的。

mdl-js-slider

为输入元素设置基本的 MDL 行为，这是必需的。

示例

下面的例子将帮助你理解如何使用 mdl-slider 类来显示不同类型的滑块。

mdl_sliders.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Slider</td><td>Slider with initial value</td>
            <td>Disabled Slider</td></tr>
         <tr><td><input id = "slider1" class = "mdl-slider mdl-js-slider" type = "range" 
            min = "0" max = "100" value = "0" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider2" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         <td><input id = "slider3" class = "mdl-slider mdl-js-slider" type = "range"  
            min = "0" max = "100" value = "25" tabindex = "0" step = "2" disabled 
            oninput = "showMessage(this.value)" onchange = "showMessage(this.value)"></td>
         </tr>
      </table>
      Value: <div id = "message" >25</div>
   </body>
</html>

结果

验证结果。

Material Design Lite - 复选框

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的复选框。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-checkbox 将标签标识为 MDL 组件，标签元素必须使用此类。
2	mdl-js-checkbox 为标签设置基本的 MDL 行为，标签元素必须使用此类。
3	mdl-checkbox__input 为复选框设置基本的 MDL 行为，输入元素 (复选框) 必须使用此类。
4	mdl-checkbox__label 为标题设置基本的 MDL 行为，span 元素 (标题) 必须使用此类。
5	mdl-js-ripple-effect 设置点击水波纹效果，可选；用于标签元素，而不是输入元素 (复选框)。

示例

下面的例子将帮助你理解如何使用 mdl-slider 类来显示不同类型的复选框。

mdl_checkboxes.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default CheckBox</td><td>CheckBox with Ripple Effect</td>
            <td>Disabled CheckBox</td></tr>
         
         <tr>
            <td> 
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1" 
                     class = "mdl-checkbox__input" checked>
                  <span class = "mdl-checkbox__label">Married</span>
               </label>
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" 
                  for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2" class = "mdl-checkbox__input">
                  <span class = "mdl-checkbox__label">Single</span>
               </label>	  
            </td>
         
            <td>
               <label class = "mdl-checkbox mdl-js-checkbox" for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3" 
                     class = "mdl-checkbox__input" disabled>
                  <span class = "mdl-checkbox__label">Don't know (Disabled)</span>
               </label>	   
            </td>
         </tr>
      </table>   
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 单选按钮

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的单选按钮。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-radio 将标签标识为 MDL 组件，标签元素必须使用此类。
2	mdl-js-radio 为标签设置基本的 MDL 行为，标签元素必须使用此类。
3	mdl-radio__button 为单选按钮设置基本的 MDL 行为，输入元素 (单选按钮) 必须使用此类。
4	mdl-radio__label 为标题设置基本的 MDL 行为，span 元素 (标题) 必须使用此类。
5	mdl-js-ripple-effect 设置点击水波纹效果，可选；用于标签元素，而不是输入元素 (单选按钮)。

示例

下面的例子将帮助你理解如何使用 mdl-slider 类来显示不同类型的单选按钮。

mdl_radio.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML  =  value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Default Radio Button</td><td>Radio Button with Ripple Effect</td>
            <td>Disabled Radio Button</td></tr>
         <tr>
            <td> 
               <label class = "mdl-radio mdl-js-radio" for = "option1">
                  <input type = "radio" id = "option1" name = "gender" 
                     class = "mdl-radio__button" checked>
                  <span class = "mdl-radio__label">Male</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio mdl-js-ripple-effect" 
                  for = "option2">
                  <input type = "radio" id = "option2" name = "gender" 
                     class = "mdl-radio__button" >
                  <span class = "mdl-radio__label">Female</span>
               </label>
            </td>
            
            <td>
               <label class = "mdl-radio mdl-js-radio" for = "option3">
                  <input type = "radio" id = "option3" name = "gender" 
                     class = "mdl-radio__button" disabled>
                  <span class = "mdl-radio__label">Don't know (Disabled)</span>
               </label>      
            </td>
         </tr>
      </table>   
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 图标

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并将不同类型的复选框显示为图标。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-icon-toggle 将标签标识为 MDL 组件，标签元素必须使用此类。
2	mdl-js-icon-toggle 为标签设置基本的 MDL 行为，标签元素必须使用此类。
3	mdl-icon-toggle__input 为图标切换设置基本的 MDL 行为，输入元素 (图标切换) 必须使用此类。
4	mdl-icon-toggle__label 为标题设置基本的 MDL 行为，i 元素 (图标) 必须使用此类。
5	mdl-js-ripple-effect 设置点击水波纹效果，可选；用于标签元素，而不是输入元素 (图标切换)。

示例

下面的例子展示了如何使用mdl-icon-toggle类将不同类型的复选框显示为图标。

mdl_icons.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Icon</td><td>Off Icon</td>
            <td>Disabled Icon</td></tr>
         <tr>
            <td> 
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-1">
                  <input type = "checkbox" id = "icon-toggle-1" 
                     class = "mdl-icon-toggle__input" checked>
                  <i class = "mdl-icon-toggle__label material-icons">format_bold</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input">
                  <i class = "mdl-icon-toggle__label material-icons">format_italic</i>
               </label>
            </td>
            
            <td>
               <label class = "mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" 
                  for = "icon-toggle-2">
                  <input type = "checkbox" id = "icon-toggle-2" 
                     class = "mdl-icon-toggle__input" disabled>
                  <i class = "mdl-icon-toggle__label material-icons">format_underline</i>
               </label>
            </td>
         </tr>
      </table>   
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 开关

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并将不同类型的复选框显示为开关。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-switch 将标签标识为 MDL 组件，标签元素必须使用此类。
2	mdl-js-switch 为标签设置基本的 MDL 行为，标签元素必须使用此类。
3	mdl-switch__input 为开关设置基本的 MDL 行为，输入元素 (开关) 必须使用此类。
4	mdl-switch__label 为标题设置基本的 MDL 行为，输入元素 (标题) 必须使用此类。
5	mdl-js-ripple-effect 设置点击水波纹效果，可选；用于标签元素，而不是输入元素 (开关)。

示例

下面的例子将帮助你理解如何使用 mdl-switch 类以及将不同类型的复选框显示为开关。

mdl_switches.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table>
         <tr><td>On Switch</td><td>Off Switch</td>
            <td>Disabled Switch</td></tr>
         <tr>
            <td> 
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-1">
                  <input type = "checkbox" id = "switch-1" 
                     class = "mdl-switch__input" checked>
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input">           
               </label>
            </td>
            
            <td>
               <label class = "mdl-switch mdl-js-switch mdl-js-ripple-effect" 
                  for = "switch-2">
                  <input type = "checkbox" id = "switch-2" 
                     class = "mdl-switch__input" disabled>
               </label>
            </td>
         </tr>
      </table>   
   </body>
</html>

结果

验证结果。

Material Design Lite - 数据表格

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并将表格显示为数据表格。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-data-table 将表格标识为 MDL 组件，表格元素必须使用此类。
2	mdl-js-data-table 为表格设置基本的 MDL 行为，表格元素必须使用此类。
3	mdl-data-table--selectable 设置全部/单个可选行为 (复选框)，可选；用于表格元素。
4	mdl-data-table__cell--non-numeric 为数据单元格设置文本格式，可选；用于表格标题和表格数据单元格。
5	(无) 默认情况下，为标题或数据单元格设置数字格式。

示例

下面的例子将帮助你理解如何使用mdl-data-table类来显示数据表格。

mdl_data_tables.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
   </head>
   
   <body>
      <table class = "mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp">
         <thead>
            <tr><th class = "mdl-data-table__cell--non-numeric">Student</th>
               <th>Class</th><th>Grade</th></tr>
         </thead>
         
         <tbody>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mahesh Parashar</td>
               <td>VI</td><td>A</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Rahul Sharma</td>
               <td>VI</td><td>B</td></tr>
            <tr><td class = "mdl-data-table__cell--non-numeric">Mohan Sood</td>
               <td>VI</td><td>A</td></tr>
         </tbody>
      </table>
   
   </body>
</html>

结果

验证结果。

Material Design Lite - 文本字段

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的文本输入。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-textfield 将容器标识为 MDL 组件，“外层”div 元素必须使用此类。
2	mdl-js-textfield 为输入设置基本的 MDL 行为，“外层”div 元素必须使用此类。
3	mdl-textfield__input 将元素标识为文本字段输入，输入或文本区域元素必须使用此类。
4	mdl-textfield__label 将元素标识为文本字段标签，输入或文本区域元素的标签元素必须使用此类。
5	mdl-textfield--floating-label 应用浮动标签效果，可选；用于“外层”div 元素。
6	mdl-textfield__error 将 span 标识为 MDL 错误消息，可选；用于具有模式的 MDL 输入元素的 span 元素。
7	mdl-textfield--expandable 将 div 标识为 MDL 可扩展文本字段容器；用于可扩展输入字段， “外层” div 元素必须使用此类。
8	mdl-button 将标签标识为 MDL 图标按钮；用于可扩展输入字段， “外层” div 的标签元素必须使用此类。
9	mdl-js-button 为图标容器设置基本行为；用于可扩展输入字段， “外层” div 的标签元素必须使用此类。
10	mdl-button--icon 将标签标识为 MDL 图标容器；用于可扩展输入字段， “外层” div 的标签元素必须使用此类。
11	mdl-input__expandable-holder 将容器标识为 MDL 组件；用于可扩展输入字段， “内层” div 元素必须使用此类。
12	is-invalid 在初始加载时将文本字段标识为无效，mdl-textfield 元素可选。

示例

下面的例子将帮助你理解如何使用 mdl-textfield 类来显示不同类型的文本字段。

mdl_textfields.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Text Field</td><td>Numeric Text Field</td>
            <td>Disabled Text Field</td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" id = "text1">
                     <label class = "mdl-textfield__label" for = "text1">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text2">
                     <label class = "mdl-textfield__label" for = "text2">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <input class = "mdl-textfield__input" type = "text" 
                        id = "text3" disabled>
                     <label class = "mdl-textfield__label" for = "text3">
                        Disabled...</label>
                  </div>
               </form>
            </td>
         </tr>
         
         <tr><td>Simple Text Field with Floating Label</td>
            <td>Numeric Text Field with Floating Label</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" id = "text4">
                     <label class = "mdl-textfield__label" for = "text4">Text...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
                     <input class = "mdl-textfield__input" type = "text" 
                        pattern = "-?[0-9]*(\.[0-9]+)?" id = "text5">
                     <label class = "mdl-textfield__label" for = "text5">
                        Number...</label>
                     <span class = "mdl-textfield__error">Number required!</span>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
         
         <tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
            <td> </td></tr>
         <tr>
            <td> 
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield">
                     <textarea class = "mdl-textfield__input" type = "text" rows =  "3" 
                        id = "text7" ></textarea>
                     <label class = "mdl-textfield__label" for = "text7">Lines...</label>
                  </div>
               </form>
            </td>
            
            <td>
               <form action = "#">
                  <div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                     <label class = "mdl-button mdl-js-button mdl-button--icon" 
                        for = "text8">
                        <i class = "material-icons">search</i>
                     </label>
                     <div class = "mdl-textfield__expandable-holder">
                        <input class = "mdl-textfield__input" type = "text" id = "text8">
                        <label class = "mdl-textfield__label" for = "sample-expandable">
                           Expandable Input</label>
                     </div>
                  </div>
               </form>
            </td>
            <td> </td>
         </tr>
      </table>   
   </body>
</html>

结果

验证结果。

Material Design Lite - 工具提示

MDL 提供一系列 CSS 类，用于应用各种预定义的视觉和行为增强功能，并显示不同类型的工具提示。下表列出了可用的类及其效果。

序号	类名及描述
1	mdl-tooltip 标识容器为 MDL 提示框，是提示框容器元素的必填属性。
2	mdl-tooltip--large 设置大字体效果，可选；位于提示框容器元素上。

序号

类名及描述

mdl-tooltip

标识容器为 MDL 提示框，是提示框容器元素的必填属性。

mdl-tooltip--large

设置大字体效果，可选；位于提示框容器元素上。

示例

以下示例将帮助您理解如何使用mdl-tooltip 类来显示不同类型的提示框。

mdl_tooltips.htm

<html>
   <head>
      <script 
         src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">	  
      
      <script langauage = "javascript">
         function showMessage(value) {
            document.getElementById("message").innerHTML = value;
         }	  
      </script>
   </head>
   
   <body>
      <table>
         <tr><td>Simple Tooltip</td><td>Large Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip1" class = "icon material-icons">add</div>
               <div class = "mdl-tooltip" for = "tooltip1">Follow</div>
            </td>
            
            <td>
               <div id = "tooltip2" class = "icon material-icons">print</div>
               <div class = "mdl-tooltip mdl-tooltip--large" for = "tooltip2">Print</div>
            </td>
         </tr>
         
         <tr>
            <td>Rich Tooltip</td><td>Multiline Tooltip</td></tr>
         <tr>
            <td>
               <div id = "tooltip3" class = "icon material-icons">cloud_upload </div>
               <div class = "mdl-tooltip" for = "tooltip3">Upload <i>zip files</i></div>
            </td>
            
            <td>
               <div id = "tooltip4" class = "icon material-icons">share</div>
               <div class = "mdl-tooltip" for = "tooltip4">
                  Share your content<br>using social media</div>
            </td>
         </tr>   	  
      </table>   
   </body>
</html>

结果

验证结果。

打印页面

Material Design Lite 快速指南

Material Design Lite - 概述

什么是 Material Design Lite？

响应式设计

标准 CSS

Material Design Lite - 环境搭建

本地安装

示例

基于 CDN 的版本

示例

Material Design Lite - 布局

固定抽屉

mdl_fixeddrawer.htm

结果

固定页眉

mdl_fixedheader.htm

结果

固定页眉和抽屉

mdl_fixedheader.htm

结果

滚动页眉

mdl_scrollingheader.htm

结果

收缩页眉

mdl_waterfallheader.htm

结果

具有可滚动标签的固定页眉

mdl_scrollabletabheader.htm

结果

具有固定标签的固定页眉

mdl_fixedtabheader.htm

结果

Material Design Lite - 网格

示例

mdl_grid.htm

结果

Material Design Lite - 标签页

示例

mdl_tabs.htm

结果

Material Design Lite - 页脚

大型页脚

mdl_megafooter.htm

结果

小型页脚

mdl_minifooter.htm

结果

Material Design Lite - 徽章

示例

mdl_badges.htm

结果

Material Design Lite - 按钮

示例

mdl_buttons.htm

结果

Material Design Lite - 卡片

示例

mdl_cards.htm

结果

Material Design Lite - 进度条

示例

mdl_progressbars.htm

结果

Material Design Lite - 加载动画

示例

mdl_spinners.htm

结果

Material Design Lite - 菜单

示例

mdl_menu.htm

结果

Material Design Lite - 滑块

示例

mdl_sliders.htm

结果

Material Design Lite - 复选框

示例

mdl_checkboxes.htm

结果

Material Design Lite - 单选按钮