Material Design Lite - 页脚

MDL 页脚组件有两种主要形式:mega-footer 和 mini-footer。mega-footer 包含的内容比 mini-footer 更复杂。mega-footer 可以表示由水平规则分隔的多个内容部分，而 mini-footer 则表示单个内容部分。页脚通常包含信息和可点击内容，例如链接。

MDL 提供各种 CSS 类，以将各种预定义的视觉和行为增强功能应用于 mega-footer 和 mini-footer。下表列出了可用的类及其效果。

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

Mega Footer

让我们讨论如何使用 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 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 − 向外部 div 添加基本 MDL 行为。

• 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 − 将容器标识为右侧部分。

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>

结果

验证结果。