📅 最后修改于: 2020-10-22 05:50:57 🧑 作者: Mango
MDL页脚组件有两种主要形式： mega-footer和mini-footer 。大型页脚比小型页脚包含更复杂的内容。大型页脚可以表示由水平规则分隔的多个内容部分，而小型页脚可以表示单个内容部分。页脚通常包含信息性内容和可点击内容，例如链接。
MDL提供了各种CSS类，以对mega-footer和mini-footer应用各种预定义的视觉和行为增强。下表列出了可用的类及其效果。
| Sr.No. | Class Name & Description |
|---|---|
| 1 |
mdl-mega-footer Identifies container as an MDL mega-footer component. Required for footer element. |
| 2 |
mdl-mega-footer__top-section Identifies container as a footer top section. Required for top section “outer” div element. |
| 3 |
mdl-mega-footer__left-section Identifies container as a left section. Required for left section “inner” div element. |
| 4 |
mdl-mega-footer__social-btn Identifies a decorative square within mega-footer. Required for button element (if used). |
| 5 |
mdl-mega-footer__right-section Identifies container as a right section. Required for right section “inner” div element. |
| 6 |
mdl-mega-footer__middle-section Identifies container as a footer middle section. Required for middle section “outer” div element. |
| 7 |
mdl-mega-footer__drop-down-section Identifies container as a drop-down (vertical) content area. Required for drop-down “inner” div elements. |
| 8 |
mdl-mega-footer__heading Identifies a heading as a mega-footer heading. Required for h1 element inside drop-down section. |
| 9 |
mdl-mega-footer__link-list Identifies an unordered list as a drop-down (vertical) list. Required for ul element inside drop-down section. |
| 10 |
mdl-mega-footer__bottom-section Identifies container as a footer bottom section. Required for bottom section “outer” div element. |
| 11 |
mdl-logo Identifies a container as a styled section heading. Required for “inner” div element in mega-footer bottom-section or mini-footer left-section. |
| 12 |
mdl-mini-footer Identifies container as an MDL mini-footer component. Required for footer element. |
| 13 |
mdl-mini-footer__left-section Identifies container as a left section. Required for left section “inner” div element. |
| 14 |
mdl-mini-footer__link-list Identifies an unordered list as an inline (horizontal) list. Required for ul element sibling to “mdl-logo” div element. |
| 15 |
mdl-mini-footer__right-section Identifies container as a right section. Required for right section “inner” div element. |
| 16 |
mdl-mini-footer__social-btn Identifies a decorative square within mini-footer. Required for button element (if used). |
现在，让我们看一些示例，以了解使用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-将标题标识为mega-footer标题。
mdl-mega-footer__link-list-将无序列表标识为内联（水平）列表。
mdl-mega-footer__bottom-section-将容器标识为页脚底部。
mdl-logo-将容器标识为样式节标题。
Material Design Tabs
验证结果。
下面的示例将帮助您了解如何使用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 mini-footer组件。
mdl-mini-footer__left-section-将容器标识为左部分。
mdl-logo-将容器标识为样式节标题。
mdl-mini-footer__link-list-将无序列表标识为内联（水平）列表。
mdl-mini-footer__right-section-将容器标识为右部分。
Material Design Tabs
验证结果。