MDL 页脚基础教程文档
收录于 2023-04-20 00:10:05 · بالعربية · English · Español · हिंदीName · 日本語 · Русский язык · 中文繁體
MDL 页脚组件有两种主要形式:
mega-footer 和
mini-footer。 mega-footer 包含比 mini-footer 更复杂的内容。巨型页脚可以表示由水平线分隔的多个内容部分,而迷你页脚表示单个内容部分。页脚通常包含信息内容和可点击内容,例如链接。
MDL 提供了各种 CSS 类来将各种预定义的视觉和行为增强应用到巨型页脚和迷你页脚。下表列出了可用的类及其效果。
Sr.No. | 类名和描述 |
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
将无序列表标识为内联(水平)列表。与"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-将基本 MDL 行为添加到外部 div。
mdl-layout--fixed-header-使标题始终可见,即使在小屏幕中也是如此。
mdl-layout__header-row-将容器标识为 MDL 标题行。
mdl-layout-title-标识布局标题文本。
mdl-layout__content-将 div 标识为 MDL 布局内容。
mdl-mega-footer-将容器标识为 MDL mega-footer 组件。
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 行为添加到外部 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/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>