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>

结果

验证结果。

打印页面