Material Design Lite - 页脚

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

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

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

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

巨型页脚

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

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

mdl_megafooter.htm

现场演示

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
   
   <body>
      <div class = "mdl-layout mdl-js-layout mdl-layout--fixed-header">
         <header class = "mdl-layout__header">
            <div class = "mdl-layout__header-row">      
               <span class = "mdl-layout-title">Material Design Tabs</span>          
            </div>       
         </header>     
         
         <main class = "mdl-layout__content">    
            <footer class = "mdl-mega-footer">
               <div class = "mdl-mega-footer__top-section">
                  <div class = "mdl-mega-footer__left-section">
                     <button class = "mdl-mega-footer__social-btn">1</button>
                     <button class = "mdl-mega-footer__social-btn">2</button>
                     <button class = "mdl-mega-footer__social-btn">3</button>
                  </div>
                  
                  <div class = "mdl-mega-footer__right-section">
                     <a href = "">Link 1</a>
                     <a href = "">Link 2</a>
                     <a href = "">Link 3</a>
                  </div>
               </div>
               
               <div class = "mdl-mega-footer__middle-section">
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link A</a></li>
                        <li><a href = "">Link B</a></li>      
                     </ul>
                  </div>  
               
                  <div class = "mdl-mega-footer__drop-down-section">
                     <h1 class = "mdl-mega-footer__heading">Heading </h1>
                     <ul class = "mdl-mega-footer__link-list">
                        <li><a href = "">Link C</a></li>
                        <li><a href = "">Link D</a></li>      
                     </ul>
                  </div>  	
               </div>
            
               <div class = "mdl-mega-footer__bottom-section">
                  <div class = "mdl-logo">
                     Bottom Section
                  </div>
                  <ul class = "mdl-mega-footer__link-list">
                     <li><a href = "">Link A</a></li>
                     <li><a href = "">Link B</a></li>
                  </ul>
               </div>
            
            </footer>
         </main>
      </div>
   </body>
</html>

结果

验证结果。

迷你页脚

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

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

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

mdl_minifooter.htm

现场演示

<html>
   <head>
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/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>

结果

验证结果。