MDL页脚组件有两种主要形式: mega-footer 和 mini-footer .巨型页脚包含比迷你页脚更复杂的内容.超级页脚可以表示由水平规则分隔的多个内容部分，而迷你页脚则表示单个内容部分.页脚通常包含信息和可点击的内容，例如链接.
MDL提供各种CSS类，以对巨型页脚和迷你页脚应用各种预定义的视觉和行为增强功能.下表列出了可用的类及其效果.
| Sr.No. | Class Name&描述 |
|---|---|
| 1 | mdl-mega-footer 将容器标识为MDL mega-footer组件.页脚元素必需. |
| 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 标识无序列表作为内联(水平)列表. ul元素兄弟需要"mdl-logo"div元素. |
| 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 : 将基本MDL行为添加到外部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 : 将容器标识为样式部分标题.
<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类将用于此示例.
mdl-layout : 将div标识为MDL组件.
mdl-js-layout : 将基本MDL行为添加到外部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 : 将容器标识为右侧部分.
<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>
